SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

WriteableBitmapその2

前回に引き続きWriteableBitmapで色々やってみた。

とりあえず、画像をいじるための準備をして、ラインアートとか書いて遊んでみた。

準備

WriteableBitmapの解像度と、画面上での表示サイズを合わせておく。

XAML

Imageコントロールを配置。
拡大・縮小しないように、Noneを指定しておく。

ウインドウサイズを、↑で配置したImageコントロールと自動で合わせるように設定する。
デザイナで、ウインドウ右下のボタンを押すと、
ウインドウサイズの指定をなくして、自動サイズのルートにすることができる。

コードはこんな感じ

<Window x:Class="WriteableBitmapExTest.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"
        Title="MainWindow"
        mc:Ignorable="d" 
        d:DesignHeight="350" d:DesignWidth="525" SizeToContent="WidthAndHeight">
    <Grid>
        <Image Name="imgTarget" Stretch="None" />
    </Grid>
</Window>
コードビハインド

C#側はこんな感じ。
MainWindowのコンストラクタで、以下のことをやってるだけです。

  1. WriteableBitmapのインスタンス作成
  2. 描画内容にかかわる部分をメソッドとして切り分けておく
  3. 描画結果をImageコントロールのSourceプロパティに設定
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WriteableBitmapExTest
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        WriteableBitmap wb;

        public MainWindow()
        {
            InitializeComponent();

            // WriteableBitmapのインスタンス生成
            wb = BitmapFactory.New(512, 512);

            RenderImage();

            // 描画結果をコントロールに反映
            imgTarget.Source = wb;
        }

        /// <summary>
        /// 実際の描画内容
        /// </summary>
        private void RenderImage()
        {
            using (wb.GetBitmapContext())
            {
                wb.Clear(Colors.Black);
            }
        }
    }
}

点の描画

X座標、y座標に合わせて色を変えて点の描画。
全ピクセルに対して、同じ処理を行う場合には、ForEachが使える。
わざわざX方向/Y方向の二重ループを書かなくてよいので便利w

        private void RenderImage()
        {
            using (wb.GetBitmapContext())
            {
                wb.ForEach((x, y, c) => Color.FromArgb(255, (byte)(x/512.0 * 255), (byte)((512-y)/512.0*255), 127));
            }
        }

ラインアート

DrawLineを使って、ありがちなラインアートを描画。

        private void RenderImage()
        {
            using (wb.GetBitmapContext())
            {
                wb.Clear(Colors.Black);
                for (int i = 0; i < 512; i += 10)
                {
                    wb.DrawLine(0, i, i, 511, Color.FromArgb(255, (byte)(i / 512.0 * 255), 0, (byte)((512 - i) / 512.0 * 255)));
                }
            }
        }