第6回 C#でお絵描き

// MainForm.cs 
using System;
using Eto.Forms;
using Eto.Drawing;

// テンプレート作成時にプロジェクト名を DrawableDemo にしたことを想定（以後同様の説明を省略）
// このnamespaceは，「〜.Gtk」等にある Program.cs においても利用されるので変更するとそちら（3箇所）も変更する必要がある．
namespace DrawableDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            Title = "Drawable Demo";
            ClientSize = new Size(320, 420);

            Drawable drawable = new Drawable();
            // Paintを購読
            // (s,pe) => { ... } の部分はPaintイベントが発生したときに呼ばれる処理であることに注意する．
            // この時点でコントロールの中身がその部分の通りに描画されるわけではない．
            drawable.Paint += (s, pe) =>
            {
                Graphics g = pe.Graphics;


                Console.WriteLine(Size);
                g.Clear(Colors.White);

                // 50 px 幅の格子を描く
                for (int x = 0; x < drawable.Size.Width; x += 50)
                {
                    g.DrawLine(Colors.LightGrey, new Point(x, 0), new Point(x, drawable.Size.Height));
                }
                for (int y = 0; y < drawable.Size.Height; y += 50)
                {
                    g.DrawLine(Colors.LightGrey, new Point(0, y), new Point(drawable.Size.Width, y));
                }

                for (int i = 0; i < 300; i += 10)
                {
                    // 指定のペン，始点，終点で線を描く
                    g.DrawLine(new Pen(Colors.Blue), new Point(0, 0), new Point(i, 100));
                }

                // 矩形のアウトラインを描く
                g.DrawRectangle(Colors.Red, new RectangleF(new PointF(0, 100), new SizeF(300, 50)));
                // Colors.Red と書くかわりに Color.FromRgb(0xFF0000) で陽にRGBを指定できる
                g.FillRectangle(Color.FromRgb(0xFF0000), new RectangleF(new PointF(0, 150), new SizeF(300, 50)));

                // 楕円のアウトラインを描く．Colors.Lime は Color.FromRgb(0x00FF00) と同じ色
                g.DrawEllipse(new Pen(Colors.Lime, 2F), new RectangleF(new PointF(0, 200), new SizeF(300, 50)));
                // 内部が塗られた楕円を描く．Colors.Green は暗めの緑
                g.FillEllipse(Colors.Green, new RectangleF(new PointF(0, 250), new SizeF(300, 50)));

                // システムのデフォルトフォント，サイズ 50pt
                Font f = new Font(SystemFont.Default, 50);
                // テキストを指定フォントで指定座標（左上点）に描く．
                g.DrawText(f, Color.FromArgb(0, 0x80, 0xff, 0x80), new Point(100, 0), "文字列");

                // PointFやRectangleFのFはfloatのF．以下はどのように表示されるかな？
                // ディスプレイ（Retinaとか）によってはアンチエイリアスもかからない．
                for (int i = 0; i < 5; i++)
                {
                    PointF start = new PointF(25F + 0.5F * i, 300 + 20 * i);
                    PointF end = start + new PointF(0, 20);
                    g.DrawLine(new Pen(Colors.Black, 1F), start, end);
                }
            };

            // Mac環境のワークアラウンド．
            // Drawableの最初のPaint時にSizeが値が正しくない https://github.com/picoe/Eto/issues/2104 
            //
            // Eto.Forms 2.6.1においては，GtkでもSizeがワンテンポ遅れて変化したりする（https://github.com/picoe/Eto/issues/1752）ので
            // 現状ではSizeに依存するコードはかかないほうがよいかもしれない．
            //
            // Invalidate()はコントロールに再描画を促す（結果，Paintイベントを発生させる）．
            drawable.SizeChanged += (s, e) => drawable.Invalidate();

            Content = drawable;

            Menu = new MenuBar();
        }
    }
}

// システムにインストールされているフォントを取得し，List<FontFamily>に変換する
List<FontFamily> fontfamilies = new List<T>( Font.AvailableFontFamilies ); 

DropDown fontfamilyChooser = new DropDown();
// ドロップダウンの「中身」を Fonts.AvailableFontFamilies にセットする
fontfamilyChooser.DataStore = Fonts.AvailableFontFamilies;
// ドロップダウンの要素をどのようにして表示するための文字列にするかを規定する（詳細は説明しない）
fontfamilyChooser.ItemTextBinding = Binding.Delegate((object o) => o.ToString());   

NumericStepper sizeSelector = new NumericStepper
{
    MinValue = 5,   // 最小値
    MaxValue = 150, // 最大値
    Increment = 1,  // 増分
    Value = 25      // 今の値
};

TextBox textToDraw = new TextBox { PlaceholderText = "Text to Draw" };

Drawable d = new Drawable();

d.Paint += (s, pe) =>
{
    pe.Graphics.Clear(Colors.White);
    // fontfamilyChooser.SelectedValue は FontFamily のインスタンスであるはずなのでキャストする．
    // なにも選ばれていない状態だと fontfamilyChooser.SelectedValue は null だが，その場合は FontFamily 型の null となる．
    FontFamily ff = (FontFamily) fontfamilyChooser.SelectedValue; 
    if (ff != null)
    {
        // sizerSelector.Value は double なので int に丸める．
        // 注：Fontコンストラクタの第2引数はfloatなので，floatにキャストしたのでも十分ではある．
        pe.Graphics.DrawText(new Font(ff, (int)sizeSelector.Value), Colors.Black, new PointF(0, 0), textToDraw.Text);
    }
};

// Invalidate() はコントロールに再描画を促す
// これらをコメントアウトしてみるとどのような挙動になるだろうか？
fontfamilyChooser.SelectedIndexChanged += (s, e) => d.Invalidate();
sizeSelector.ValueChanged += (s, e) => d.Invalidate();
textToDraw.TextChanged += (s, e) => d.Invalidate();

// MainForm.cs
using System;
using Eto.Forms;
using Eto.Drawing;

namespace FontDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            Title = "Font Demo";
            MinimumSize = new Size(200, 200);

            DropDown fontfamilyChooser = new DropDown { };
            fontfamilyChooser.DataStore = Fonts.AvailableFontFamilies;
            fontfamilyChooser.ItemTextBinding = Binding.Delegate((object o) => o.ToString());

            NumericStepper sizeSelector = new NumericStepper
            {
                MinValue = 5,
                MaxValue = 150,
                Increment = 1,
                Value = 25
            };

            TextBox textToDraw = new TextBox { PlaceholderText = "Text to Draw" };

            Drawable d = new Drawable();
            d.Paint += (s, pe) =>
            {
                pe.Graphics.Clear(Colors.White);
                FontFamily ff = (FontFamily)fontfamilyChooser.SelectedValue;
                if (ff != null)
                {
                    pe.Graphics.DrawText(new Font(ff, (int)sizeSelector.Value), Colors.Black, new PointF(0, 0), textToDraw.Text);
                }
            };

            fontfamilyChooser.SelectedIndexChanged += (s, e) => d.Invalidate();
            sizeSelector.ValueChanged += (s, e) => d.Invalidate();
            textToDraw.TextChanged += (s, e) => d.Invalidate();

            Content = new StackLayout
            {
                Padding = 10,
                Spacing = 5,
                HorizontalContentAlignment = HorizontalAlignment.Stretch,
                Items =
                {
                    new StackLayout
                    {
                        Orientation = Orientation.Horizontal,
                        Items = {
                            fontfamilyChooser, sizeSelector
                        }
                    },
                    textToDraw,
                    new StackLayoutItem (d, true)
                }
            };
            Menu = new MenuBar();
        }
    }
}

MouseUp += (s, me) => {
   if ( me.Buttons.HasFlag(Buttons.Primary) ) 
   {
       // 左クリック（左利き用設定をしていない場合）のときの処理
   }
   else if ( me.Buttons.HasFlag(Buttons.Alternate) )
   {
       // 右クリックのときの処理
   }
}

// MainForm.cs
using System;
using Eto.Forms;
using Eto.Drawing;

namespace MouseDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            Title = "Mouse Demo";
            MinimumSize = new Size(200, 200);

            PointF clicked = new PointF(0, 0);
            SizeF circleSize = new SizeF(10, 10);

            Drawable d = new Drawable();
            d.Paint += (s, pe) =>
            {
                // 演算子のオーバローディングにより，floatをSizeFに掛けることもできるし，PointFにSizeFを加減算可能．
                pe.Graphics.FillEllipse(Colors.Black, new RectangleF(clicked - 0.5F * circleSize, clicked + 0.5F * circleSize));
            };
            d.MouseDown += (s, me) =>
            {
                clicked = me.Location;
                d.Invalidate();
            };

            Content = d;
            Menu = new MenuBar();
        }
    }
}