WPFで2D(将来的には3Dも)を扱いたい

Question

お世話になります．

WPFアプリで2DCADを作っています．
当然大量の2D図形(線分，円弧，スプライン等)を扱い，マウスでの操作が基本になるのですが，
どのようなフレームワーク？で作るのが良いでしょうか．

ひとつはDXライブラリもありかなと思ったのですが，C#からのアクセスがあまりやりやすくない?みたいですし，
WPFにあるCanvas上で描くのもやってみたのですがうまく行かず･･･(表示までは問題なかったが，マウスで掴んだり，コントロールポイントを表示したりというのがやりづらかった．また，線分と円弧，その他の図形によって基底クラスが違ったり･･･)

どのような体系でやるのが良いかアドバイスいただけますでしょうか．

現状2Dができればまったく問題ないのですが，将来的にもしかしたら2.5D，または3Dに手を出したいとも思っております．

(Dxライブラリはちょっとだけいじったことがあります．)

条件として，できればWPFの範囲で作りたいと思っているのですが，，，
手としては，BrowserControlでHtml5なんてのもｱﾘなんでしょうか(笑)

よろしくお願いいたします．

Html,Cssの基礎知識はあります．(静的なサイトを作れる程度)
Javascriptは簡単なのをいじったことがあります
DXlibはCで扱ったことがあります．(遊んでみた程度)

本格的な図形操作を伴うプログラミングは初めてです．

Answer 1

配置するオブジェクト（2D図形）の数や解像度にもよりますが、Canvasは仮想化をサポートしておらず、決してパフォーマンスが良いとは思いません。
WPFの表現力とBindingの威力は大変強力で、とても魅力的なフレームワークではありますが、事前に十分検証を行い、パフォーマンスには常に留意したほうが良いです。
参考までに。。

Comments

[hihijiji]

ebiryoさんに同意です。
以前簡易的なCADとの事でWPFをお勧めしましたが、UI要素やレイヤが多くなると描画速度面で厳しいかもしれません。
難易度は上がりますが、本格的に作りこむならOpenGL系のライブラリの使用も検討してください。

[ElecDove]

回答ありがとうございます．
パフォーマンスについては実際にやってみないとわからないという感じでしょうか

hihijiji様
>本格的に作りこむならOpenGL系のライブラリ
OpenGLというものがあるのですね
C++のほうがメインのようですので，Cs,WPFでどのように使えるか調べてみたいと思います

Answer 2

WPF自体がフレームワーク（震え声

直接、Canvasに「線分と円弧，その他の図形」を書くのではなく、UserControlを挟むといいんじゃないかと。
３Dをやりたいなら、今時はUnityじゃないですかね。使ったことないけど。

「BrowserControlでHtml5なんてのもｱﾘなんでしょうか」ありえない。それなら、JSでElectronをアプリを作るのを目指したほうがマシ。

パフォーマンス云々なら、Win2Dとかもありますね。UWPになりますが。ゲームが作れるクオリティだとか。
http://microsoft.github.io/Win2D/html/Introduction.htm

Comments

[ElecDove]

回答ありがとうございます

>直接、Canvasに「線分と円弧，その他の図形」を書くのではなく、UserControlを挟むといいんじゃないかと。
マウスによるGUI的な操作はUserControlに任せてしまおう，という意図でしょうか
私の技術力では厳しいような感じがします・・・

Win2Dでゲームが作れるクオリティというのは魅力的ですが，UWPなので今回は見送らせていただきます

[kiichi54321]

正直、WPFはもう10年位経ちますし「クラシックディスクトップ」らしいので、これから大きな変化は起こることもないですし、レガシーに縛れれるのでもなく、事実上ゼロからなら、技術の方向性的には差のないUWPのほうを勉強したほうがいいと思いますけどね。タッチパネル対応とか諸々もやってくれるのだし。まぁ、UWPは、MSを信じれるかという話になるのですけど。

[ElecDove]

＞WPFはもう10年位経ちますし
そんなに経っていたのですね。知りませんでした。
WPFの前はWinFormで遊んでいたのでてっきりWPFはそこそこ新しいものと思っておりました。

Uwpはwin10でないと動かなかったり、導入にストア？のライセンスが必要だったりとするのでしたよね
このあたりが障壁になってしまいます、、、
(オフラインで動作させる前提のPCに組み込んだりもするので、win7以前でも動く必要がある）

MSを信じないことはないのですが、現状ちょっと、、、という感じです

Answer 3

一度回答しているのですが、
WPFの範囲でもある程度は作成可能と思います。

WPFにあるCanvas上で描くのもやってみたのですがうまく行かず･･･(表示までは問題なかったが，マウスで掴んだり，コントロールポイントを表示したりというのがやりづらかった．また，線分と円弧，その他の図形によって基底クラスが違ったり･･･)

パーツ用のクラスは自分で都合の良い継承関係で作成します。
これば、MVVMのモデルとなります。
描画(UI)はItemsControl等を利用してDataTemplateでの表示が可能です。
必要に応じて、VMを挟むなり好きで良いですが、このDataTemplateの時点で、
円や矩形等の描画用クラスを使ったり、Pathを使うことで描画用クラス自体の派生関係は気にしなくても良くなります。
また、3Dにする場合も3D用のDataTemplateを用意するだけで差し替え可能です。

このように、WPFではモデルとUI部分を強力に分離して扱いやすくする機能が標準で用意されており、フレームワークとして問題ないのではないでしょうか？

コード例

色々端折っていますが、参考までに。

<Window x:Class="TestShape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestShape"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        >
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:ShapeModel}">
            <Rectangle Width="100" Height="50"
                           Fill="Red"/>

        </DataTemplate>
        <DataTemplate DataType="{x:Type local:EllipseModel}">
            <!--
            <Ellipse Width="40" Height="40"
                           Fill="Blue"/>
            -->
            <Path Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <EllipseGeometry RadiusX="20" RadiusY="20" />
                </Path.Data>
            </Path>
        </DataTemplate>
    </Window.Resources>
    <ItemsControl ItemsSource="{Binding Shapes}">
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Background="AliceBlue"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Window>

XAML側(MainWindow.xaml)。Modelに合わせてDataTemplateを定義しています。
Pathは、Rectangle や Ellipse より、更に低レベルな描画用です。

namespace TestShape
{
	/// <summary>
	/// MainWindow.xaml の相互作用ロジック
	/// </summary>
	public partial class MainWindow : Window
	{
		public MainWindow() {
			InitializeComponent();


			this.Shapes.Add(new ShapeModel() { X = 100, Y = 50 });
			this.Shapes.Add(new EllipseModel() { X = 50, Y = 100 });

			this.DataContext = this;
		}


		public ObservableCollection<ShapeModel> Shapes { get; } = new ObservableCollection<ShapeModel>();
	}
}

MainWindow.xaml.cs 側。
とりあえず、コンストラクタでモデルを突っ込んでいます。

namespace TestShape
{
	/// <summary>
	/// TODO 通知可能なクラスにする
	/// </summary>
	public class ShapeModel
	{
		public int X { get; set; }
		public int Y { get; set; }
	}

	public class EllipseModel: ShapeModel
	{

	}
}

モデル側。都合の良い用に継承構造等を用意できます。
実際にバインディングする場合、通知可能な構造が必要です。
場合によってはVMを挟む等するが良いと思います。

マウスクリックによる操作や、D&D等は、WPF Thumb リサイズ 等でググれば例もあると思います。
すぐにコード書けなかったのでDataTemplateの実例までとします。

Comments

[ElecDove]

再度回答いただきありがとうございます

DataTemplateを使ったことがないので，まだ詳細にイメージできませんが，DataTemplate自体が「とにかくデータを描画側に渡して，その中の具体的などのデータをどのように表示するかは描画側が制御する」というプログラムと表示を分離する役割を果たす概念だと理解いたしました

ということはつまり，例えば図形の種類や，その一座標，色などをDataTemplateで作ってやり，描画側で適切に描画するということでしょうか

>Pathを使うことで
Pathとは何でしょうか．．．

まだマウスで線分がクリックされたときに
①コントロールポイントを表示し
②その線分を移動可能にする
③同時にその線分の色や線種(点線など)を変える
くらいはやりたいと思っています
1は表示するだけですので良いのですが，その線分を「コントロールポイントをつかんで動かすことで」線分を移動することになります

この部分がどのようにコーディングすればよいか，流れがいまいちイメージできないのですが...．

[ElecDove]

サンプルソースまでいただき感謝いたします

すぐには理解できないと思うので，少しずついじりながらどういう仕組みになっているのか理解していきたいと思います