任意3D文字が回転するスクリーンセーバー

WPFでTextから2DのPathに変換しました。じゃあ3Dは?というのが浮かんだ内容ですが、これが結構難しい。行きついた情報はこちら、あのProgramming Windowsで有名なCharles Petzold氏のMSDNマガジンへの寄稿でした。

詳細は追って理解するとしてこれを使ったスクリーンセーバを作ってみます。WPFによるスクリーンセーバーの作り方はこちら、非常に分かりやすく解説されています。

 

App.xaml.cs

namespace WpfText3DScreenSaver
{
    using System.Globalization;
    using System.Windows;

    public partial class App : Application
    {
        private MainWindow window = new MainWindow();

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            if (e.Args.Length > 0){
                string mode = e.Args[0].ToLower(CultureInfo.InvariantCulture);
                if (mode.StartsWith("/c")){
                    ShowConfig();
                    return;
                }
                else if (mode.StartsWith("/p"))
                {
                    return;
                }
            }
            SaveScreen();
        }

        private void ShowConfig()
        {
            var settingWindow = new TextSettingWindow();
            settingWindow.ShowDialog();
        }
        private void SaveScreen()
        {
            window.Topmost = true;
            window.Left = 0;
            window.Top = 0;
            window.WindowState = WindowState.Maximized;
            window.Show();
        }
    }
}

App.xaml

<Application x:Class="WpfText3DScreenSaver.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Startup="Application_Startup">
    <Application.Resources>
    </Application.Resources>
</Application>

StartupUriでなく、Startupになっているのに注意。Startupとしてはcsで定義したハンドラを指定しています。設定ウィンドウはこんな感じ。

 TextSettingWindow.xaml.cs

namespace WpfText3DScreenSaver
{
    using System.Windows;

    public partial class TextSettingWindow : Window
    {
        public TextSettingWindow()
        {
            InitializeComponent();
            textbox.Text = Properties.Settings.Default.Text3D;
            setbutton.Click += (_, __) =>{
                DialogResult = true;
                Properties.Settings.Default.Text3D = textbox.Text;
                Properties.Settings.Default.Save();
                Close();
            };
            cancelbutton.Click += (_, __) =>
            {
                DialogResult = false;
                Close();
            };
        }
    }
}

TextSettingWindow.xaml

<Window x:Class="WpfText3DScreenSaver.TextSettingWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextSettingWindow" Height="104" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="140"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Name="textbox" Grid.ColumnSpan="3" TextWrapping="Wrap" Text="TextBox"/>
        <Button Name="setbutton"  Content="設定" Grid.Column="1" Grid.Row="1"/>
        <Button Name="cancelbutton" Content="キャンセル" Grid.Column="2" Grid.Row="1"/>
    </Grid>
</Window>

settingwindow

ポイントって言うほどではないんですが、設定時と実行時ではプログラム引数違いなだけでそれぞれ終了してしまうため、設定を保持しておく必要があります。ここではフツーにSettingsを使って設定を保持しておくことにします。

 

さて、メインとなるウィンドウはこちら。

 MainWindow.xaml

<Window x:Class="WpfText3DScreenSaver.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:petzold="clr-namespace:Petzold.Text3D;assembly=Petzold.Text3D"
        Title="MainWindow" Height="350" Width="525" WindowStyle="None">
    <Grid>
        <Viewport3D>
            <petzold:SolidText x:Name="field"
                       Text="任意文字"
                       FontFamily="Times New Roman"
                       FontWeight="Bold"
                       Origin="-1.5 0.5" Depth="0.5">
                <petzold:SolidText.Material>
                    <MaterialGroup>
                        <DiffuseMaterial Brush="Blue" />
                        <SpecularMaterial Brush="White" />
                    </MaterialGroup>
                </petzold:SolidText.Material>

                <petzold:SolidText.BackMaterial>
                    <MaterialGroup>
                        <DiffuseMaterial Brush="Red" />
                        <SpecularMaterial Brush="White" />
                    </MaterialGroup>
                </petzold:SolidText.BackMaterial>

                <petzold:SolidText.SideMaterial>
                    <MaterialGroup>
                        <DiffuseMaterial>
                            <DiffuseMaterial.Brush>
                                <LinearGradientBrush StartPoint="0 0"
                                                 EndPoint="0 1">
                                    <GradientStop Offset="0" Color="Blue" />
                                    <GradientStop Offset="1" Color="Red" />
                                </LinearGradientBrush>
                            </DiffuseMaterial.Brush>
                        </DiffuseMaterial>
                        <SpecularMaterial Brush="White" />
                    </MaterialGroup>
                </petzold:SolidText.SideMaterial>

                 <!--Transform.-->
                <petzold:SolidText.Transform>
                    <RotateTransform3D>
                        <RotateTransform3D.Rotation>
                            <AxisAngleRotation3D x:Name="rotate" Axis="1 1 0" />
                        </RotateTransform3D.Rotation>
                    </RotateTransform3D>
                </petzold:SolidText.Transform>
            </petzold:SolidText>

             <!--Lights.-->
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <AmbientLight Color="#404040" />
                        <DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>

             <!--Camera.-->
            <Viewport3D.Camera>
                <PerspectiveCamera Position="0 0 8" UpDirection="0 1 0"
                               LookDirection="0 0 -1" FieldOfView="45" />
            </Viewport3D.Camera>
        </Viewport3D>

         <!--Animation.-->
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Page.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="rotate"
                                     Storyboard.TargetProperty="Angle"
                                     From="0" To="360" Duration="0:0:15"
                                     RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</Window>

MainWindow.xaml.cs

namespace WpfText3DScreenSaver
{
    using System.Windows;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            field.Text = Properties.Settings.Default.Text3D;
            this.MouseMove += (_, __) => Close();
        }
    }
}

3D表示は全体的にPetzold.Text3D DLLに依存しています。MSDNからソースコードも落とせるので落として見ると良いかと。これをexeとしてビルドした後、srcに拡張しを変更して、ファイルを右クリック→インストールを実行した様子はこちら。

setting

これを実行した画面キャプチャした様子はこちら。

scrsave

Text→3Dへの変換は追って理解していくことにします。

広告

WPF Text→Path変換2

恥ずかしいエントリを公開しないよう見直していたら他の簡単な方法をまた見つけた。

WPFでTextからPathへの変換処理、前々回ご紹介したところですが以下のようにするともっと簡単にできました。FormattedTextを使う方法でこんな感じ。

StringToPathConverter2.cs

namespace WpfTextClip
{
    using System.Globalization;
    using System.Windows.Media;
    using System.Windows;
    using System.Windows.Shapes;

    public class StringToPathConverter2
    {
        public static System.Windows.Shapes.Path ConvertToPath(string text)
        {
            var formatedText = new FormattedText(text, new CultureInfo("ja"), FlowDirection.LeftToRight,
                new Typeface("verdana"), 150, Brushes.Black);
            Path path = new Path();
            path.Data = formatedText.BuildGeometry(new Point());
            return path;
        }

    }
}

これを以前同様、MainWindowのボタンハンドラでGridをclipするように

MainWindow.xaml.cs

namespace WpfTextClip
{
    using System.Windows;
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void convertbutton_Click(object sender, RoutedEventArgs e)
        {
            targetCanvas.Clip = StringToPathConverter2.ConvertToPath(textBox.Text).Data;
        }
    }
}

処理してやると以下のようになります。

texttopath2

やりたいこととしてはできていますね。前々回の内容はGraphicsPath→Pathへの変換という意味では意味がありますが、Textからの変換だと上の方法のほうが楽です。

 

WPF 波紋ドロップアニメーション

Effect効果をちゃんと把握しておらず恥ずかしいエントリを先日公開したところで、Effectを確認しておこうと思いました;

1.RippleEffect

作成するのは画面上のImageに対してクリック(or ドロップ操作)をすると画像に波紋が描かれるようなもの。RippleEffectを使います、Blendから設定するか、VisualStudioからだとBlendのSDKをインストールした上でMicrosoft.Expression.Effectsを参照設定する必要があります。

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
        x:Class="WpfRippleEffectTest.MainWindow"
        Title="MainWindow" Height="245" Width="286">
	<Window.Resources>
		<Storyboard x:Key="RippleEffectStoryboard">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Magnitude)" Storyboard.TargetName="image">
				<EasingDoubleKeyFrame KeyTime="0" Value="0.4"/>
				<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Frequency)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
	</Window.Resources>
	<Grid>
		<Image x:Name="image" Source="Lighthouse.jpg" Stretch="UniformToFill" MouseDown="image_MouseDown">
			<Image.Effect>
				<ee:RippleEffect x:Name="rippleEffect" Frequency="0"/>
			</Image.Effect>
		</Image>

	</Grid>
</Window>

MainWindow.xaml.cs

namespace WpfRippleEffectTest
{
    using System.Windows;
    using System.Windows.Input;
    using System.Windows.Media.Animation;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var clickedPos = e.GetPosition(image);
            rippleEffect.Center = new Point(clickedPos.X / image.ActualWidth, clickedPos.Y / image.ActualHeight);
            var storyboard = FindResource("RippleEffectStoryboard") as Storyboard;
            storyboard.Begin();
        }
    }
}

dropeffect

Easingをうまく設定することや、Storyboardをいくつも作成して複数の波紋を再現するなどの凝る要素があります。RippleEffectはアニメーション内で使うのがほとんどかと思われます。ファイルがドロップされると波紋が浮き立つというソフトがありましたが、こちらはRippleEffectは使わず自作しているようですね。。

 

2.その他のEffect

Blend付属のEffect以外にもWPF Shader Effect Libraryというライブラリがあり、ごく簡単な手順で組込むことができます。ダウンロードするとわかりますが、HLSLでShaderが定義されており、著作権等を考慮して一部転載も避けますがRippleEffectのそれもあります。手順は、

HLSL(.fx)→コンパイル→.psファイル→C#からUriでファイル指定してロード

となっています。このライブラリを使うだけならEffectクラスがあるので不要ですが、カスタムEffectをHLSLから記述する場合の手順がこちらで紹介されています。

 

WPF Text(GraphicsPath)→Path変換

WPFでは所望の形にElementを切り出せますが、System.Windows.Shapes.Pathを自作するのはちょっと苦労。例えば文字列のPathを取得しようと思うと簡単にはできません、System.Drawing.Drawing2D.GeometryPathならばStringから直接変換できるわけで、今回はSystem.Drawing.Drawing2D.GeometryPathからSystem.Windos.Shapes.Pathを変換してみようというトライ。

これ地味に面倒で、いくつか関連サイトあるけどどこかごまかしているような。。

System.Windows.Shapes.Pathを作成するとGeometryができるので、それをCanvas.Clipに設定することで切り抜いてやろうと思います。確認用UIはこんな感じ。

 MainWindow.xaml

<Window x:Class="WpfTextClip.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:me="clr-namespace:WpfTextClip"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <me:StringToPathConverter x:Key="strPathConverter"/>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="7*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox x:Name="textBox" Grid.Row="1" TextWrapping="Wrap" Text="TextBox"/>
        <Canvas x:Name="targetCanvas" Grid.ColumnSpan="2" Background="Black"/>
        <Button x:Name="convertbutton" Content="Convert" Grid.Column="1" Grid.Row="1" Click="convertbutton_Click"/>
    </Grid>
</Window>

mainwindow

Mainwindow.xaml.cs

namespace WpfTextClip
{
    using System.Windows;
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void convertbutton_Click(object sender, RoutedEventArgs e)
        {
            targetCanvas.Clip = StringToPathConverter.ConvertToPath(textBox.Text).Data;
        }
    }
}

Convertボタンを押すと、TextBoxに指定された文字列で上のCanvasをClipしてやる構図。ということで本題であるGeometryPathからPathを作成するのはこちら。

 StringToPathConverter.cs

namespace WpfTextClip
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Windows.Data;
    using System.Windows.Media;
    using System.Windows.Shapes;

    public class StringToPathConverter
    {
        public static System.Windows.Shapes.Path ConvertToPath2(string text)
        {
            // string -> GraphicsPath
            var basePath = new System.Drawing.Drawing2D.GraphicsPath();
            var fontFamily = new System.Drawing.FontFamily("MS ゴシック");
            basePath.AddString(text, fontFamily, (int)System.Drawing.FontStyle.Regular,
                150, System.Drawing.Point.Empty, System.Drawing.StringFormat.GenericDefault);

            // GraphicsPath -> Path
            var pathGeometry = new PathGeometry();
            PathFigure pathFigure = null;

            for (int i = 0; i < basePath.PointCount; i++)
            {
                System.Drawing.Drawing2D.PathPointType pathtype =
                    ((System.Drawing.Drawing2D.PathPointType)basePath.PathTypes[i]) & System.Drawing.Drawing2D.PathPointType.PathTypeMask;
                System.Drawing.Drawing2D.PathPointType control =
                    ((System.Drawing.Drawing2D.PathPointType)basePath.PathTypes[i]) & System.Drawing.Drawing2D.PathPointType.CloseSubpath;

                switch (pathtype)
                {
                    case System.Drawing.Drawing2D.PathPointType.Start:
                        pathFigure = new PathFigure();
                        pathFigure.StartPoint = new System.Windows.Point(basePath.PathPoints[i].X,
                                                                         basePath.PathPoints[i].Y);
                        break;
                    case System.Drawing.Drawing2D.PathPointType.Line:
                        pathFigure.Segments.Add(new LineSegment(new System.Windows.Point(basePath.PathPoints[i].X,
                                                              basePath.PathPoints[i].Y), true));
                        break;
                    case System.Drawing.Drawing2D.PathPointType.Bezier:
                        if (basePath.PointCount-1 < (i + 2)){
                            // index out of range.
                            continue;
                        }
                        var ii = ((System.Drawing.Drawing2D.PathPointType)basePath.PathTypes[i+1]) & System.Drawing.Drawing2D.PathPointType.PathTypeMask;
                        var iii = ((System.Drawing.Drawing2D.PathPointType)basePath.PathTypes[i+2]) & System.Drawing.Drawing2D.PathPointType.PathTypeMask;
                        if (ii == System.Drawing.Drawing2D.PathPointType.Bezier &&
                            iii == System.Drawing.Drawing2D.PathPointType.Bezier)
                        {
                            pathFigure.Segments.Add(new BezierSegment(
                                new System.Windows.Point(basePath.PathPoints[i].X, basePath.PathPoints[i].Y),
                                new System.Windows.Point(basePath.PathPoints[i+1].X, basePath.PathPoints[i+1].Y),
                                new System.Windows.Point(basePath.PathPoints[i+2].X, basePath.PathPoints[i+2].Y),
                                true));
                        }
                        break;
                }
                switch (control)
                {
                    case System.Drawing.Drawing2D.PathPointType.DashMode:
                    // not supported.
                    case System.Drawing.Drawing2D.PathPointType.PathMarker:
                        // ignore.
                        break;
                    case System.Drawing.Drawing2D.PathPointType.CloseSubpath:
                        pathGeometry.Figures.Add(pathFigure);
                        break;
                }
            }
            Path path = new Path();
            path.Data = pathGeometry;
            return path;
        }

    }
}

フー。FontFamilyやサイズは適当に固定値にしていますが必要に応じて値を変更してくださいませ。これを実行するとこんな感じになります。

runmainwindow

わかりにくいですがCanvasそのものがClipされています。