無限の透明市松模様をWriteableBitmapとImageBrushのタイル表示で作成
ウィンドウのサイズに合わせて背景の市松模様が表示される
どこまでも続く透明市松模様
デザイン画面
MainWindow.xaml
MainWindow.xaml.cs
その画像からImageBrushを作成、ブラシの設定を引き伸ばしなしのタイルに設定
そのブラシを背景に設定
市松模様の画像をWriteableBitmapで作成
16行目で26行目から市松模様画像作成
引数の10は市松模様のマス(セル)の1辺の長さ、Colors.LightGrayは模様の色■
白と、指定した色のマスを交互に置いて合計4つのマス
■■
■■
背景が白だから判りづらいw
セルサイズの2倍の画像を作成するので縦横2倍、28,29行目
左上と右下を白、それ以外を指定した色にしたいから
画像のピクセル位置x,yが
共に0~セルサイズ未満のとき、または
共にセルサイズ以上のとき
白にして、それ以外の時を指定した色にする
これが39~43行目
これでできあがる画像は
これ
あとはこの画像をタイル状に敷き詰めれば市松模様になる
ImageBrushは画像からブラシを作成できる
Brushには敷き詰めた状態で表示するタイルモードがある
画像からImageBrushを作成、ブラシの設定を引き伸ばしなしのタイルに設定
この設定で目的のブラシができたけど、よくわかっていない
ImageBrushの設定で必要だったのは以下の3つ
- TileModeをTile
- ViewportにするRectのサイズをタイルにする画像サイズにする
- ViewportUnitsをAbsolute
失敗例
元画像を引き伸ばし無しでタイル状に敷き詰めたブラシにするから
それっぽいプロパティをそれっぽく指定して
StretchをNoneブラシの引き伸ばしなし
TileModeをTileタイルモードをタイル
これで実行すると
違う
タイルモードはあっていると思うからStretchが違うのかなあと
StretchをUniformにしてみたら
これも違う
ググって流れ変わる
方法: TileBrush のタイル サイズを設定する | Microsoft DocsViewportとViewportUnitsでタイルのサイズを決めるみたい、これが必要だった
https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/graphics-multimedia/how-to-set-the-tile-size-for-a-tilebrush
Viewport
これでタイルの位置とサイズを設定できる
作っているのはImageBrushなんだけど、説明見るとこれはTileBrush用?
引き伸ばしされたくないのでタイルのサイズは元画像と同じに指定
VIewportUnits
Viewportで指定した数値をどう受け取るかの設定みたい
2種類しかない、絶対値(Absolute)指定か相対値指定っぽい指定しないときの初期値はRelativeになっていたので
ここはAbsoluteを選択して
66行目、この状態でも正しく表示される
RelativeToBoundingBox
ViewportをRect(0,0,0.2,0.2)
これだと
Relativeにして0.2を指定すると0.2ごとの場所に表示されるみたい
こういうのも面白いねえ
セルサイズと色の変更
セルサイズを50、色をトマトで実行
2019/03/30追記
WPF のブラシの概要 | Microsoft DocsここにあるDrawingBrush、こっちのほうがいいかも?
https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/graphics-multimedia/wpf-brushes-overview
追記ここまで
ギットハブ
関連記事、2019/03/30は明日
画像の使用色数とその色のピクセル数を表示するアプリその5 ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15918266.html