[UWP][InkCanvas] インクキャンバスを使用する

2016.07.11

UWPでお絵かきツールを作成するにはInkCanvasコントロールを使用するのが一番です。

今回は基本的な使用方法を見ていきます。

はじめにMainPage.xamlにInkCanvasコントロールを配置します。

配置したらNameプロパティをinkCanvasに設定し、以下のコードを記述します。

public MainPage()
{
    this.InitializeComponent();

    // 描画属性を作成する
    InkDrawingAttributes attributes = new InkDrawingAttributes();
    attributes.Color = Windows.UI.Colors.Red;   // ペンの色
    attributes.Size = new Size(10, 2);          // ペンのサイズ
    attributes.IgnorePressure = false;          // ペンの圧力を使用するかどうか
    attributes.FitToCurve = false;

    // インクキャンバスに属性を設定する
    inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(attributes);
    // マウスとペンによる描画を許可する
    inkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen;
}

はじめに描画属性を作成します。

描画属性とは、キャンバスに描くときのペンの設定のことでInkDrawingAttributesクラスを使用してい作成します。

Colorでペンの色を、Sizeでペンの太さを、IgnorePressureでペン圧力を反映させるかどうかを設定します。FitToCurveはベジェ曲線や直線描画を行う場合はtrueに設定します。

Sizeですが、ペンの横幅と高さを設定することができるので様々なペン先を作成することができます。

属性を作成したら、InkCanvasの.InkPresenter.UpdateDefaultDrawingAttributesメソッドで反映します。

マウスとペンでの描画を許可するにはInputDeviceTypes プロパティで設定します。

たったこれだけでインクキャンバスを使用できるようになります。

実行例を以下に示します。