Win2Dでお絵かきプログラミング

プログラミング
この記事は約4分で読めます。

過去記事の再掲です。

はじめに

僕は普段、簡単なプログラミングには Processing を使っている。
java 使えるし、見た目のあるアプリケーションを簡単に開発できるので気に入っている。
ところで、最近 WindowsAPI を使って開発したいものがあった。こういうものは VisualStudio を使って C#で作るのがよい。

さて、Windows の GUI 開発にはいくつか種類があって、「フォームアプリケーション」とか WPF とか UWP とかある。
新しいのが UWP で、センサーの値を拾ったりするのが簡単である。見た目の部分は xaml を使って描くらしい。
GUI の部品はある程度用意されており、デザイナーの使い勝手もとてもいい。ただ前述のとおり Processing が好きな僕は、できれば UWP でも簡単に図形を描画したりしたい。

そんな願いを叶えてくれるのが、Microsoft が出している(!)Win2D というライブラリである。 簡単に説明すると、DirectX のラッパーである。

導入

「ファイル」→「新規作成」→「プロジェクト」から「空のアプリケーション」を選択。

f:id:salmon2073:20160314115327p:plain

新しいプロジェクトが開いたら、「ツール」→「NuGet パッケージマネージャー」→「ソリューションの NuGet パッケージの管理」と進み、 「参照」タブを選択。検索バーに win2d と入力するといくつか候補が出てくる。 赤いアイコンのやつがうまく動いてくれるので、win10 の人は基本的に「Win2D.uwp」を選択してインストール。プロジェクト作成時に(Windows8.1)と表示された人は「Win2D.wiin81」を選択しよう。

f:id:salmon2073:20160314120116p:plain

Win2d の初期設定

公式ドキュメントに使い方が載っている。

Introduction

MainPage.xaml の Page タグの中に以下の文を書き込み、

xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

Grid タグの中に以下の文を書き込めばよい。

<canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="White" Loaded="CanvasControl_Loaded"/>

MainPage.xaml.cs にセットアップ用のメソッドと描画用のメソッドを実装する。 最低限動くコードは以下の通り。

<!-- wp:preformatted -->
<pre class="wp-block-preformatted"><span class="synStatement">using</span> Microsoft.Graphics.Canvas;<br><span class="synStatement">using</span> Microsoft.Graphics.Canvas.UI.Xaml;<br><span class="synStatement">using</span> Windows.UI.Xaml;<br><span class="synStatement">using</span> Windows.UI.Xaml.Controls;</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p><span class="synType">namespace</span> App2<br>{<br><span class="synType">public</span> <span class="synType">sealed</span> <span class="synStatement">partial</span> <span class="synType">class</span> MainPage : Page<br>{<br><span class="synType">public</span> MainPage()<br>{<br><span class="synStatement">this</span>.InitializeComponent();<br>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span class="synType">private</span> <span class="synType">void</span> CanvasControl_Loaded(<span class="synType">object</span> sender</p>
<!-- /wp:paragraph -->

コメント

タイトルとURLをコピーしました