チュートリアル - ビットマップペイントツールの開発 - ブラシのサイズとカラー

チュートリアル > ビットマップペイントツールの開発 - ブラシのサイズとカラー

このビットマップペイントツール開発の手順では、ブラシのカラーとサイズのコントロールを追加します。

全体の流れ:

既存の MacroScript を拡張し、インクカラーとブラシサイズを定義するための UI コントロールをロールアウトに追加します。

paintBrush 関数を変更し、UI のカラーピッカーで定義されたカラーが使用されるようにします。

drawStroke 関数を拡張し、定義されたサイズに従って大きな長方形を描画できるようにします。

スクリプト:

macroScript MicroPaint category:"HowTo"
(
global MicroPaint_CanvasRollout
try(destroyDialog MicroPaint_CanvasRollout)catch()
local isDrawing = false
local bitmapX = bitmapY = 512
local theCanvasBitmap = bitmap bitmapX bitmapY color:white
local currentPos = lastPos = [0,0]
 
rollout MicroPaint_CanvasRollout "MicroPaint"
(
  bitmap theCanvas pos:[0,0] width:bitmapX height:bitmapY bitmap:theCanvasBitmap
  colorpicker inkColor height:16 modal:false color:black across:2
  spinner BrushSize"Size"range:[1,50,10] type:#integer fieldwidth:40
 
  fn paintBrush pos = (setPixels theCanvasBitmap pos #(inkColor.color))
  fn drawStroke lastPos pos =
  (
    currentPos = lastPos
    deltaX = pos.x - lastPos.x
    deltaY = pos.y - lastPos.y
    maxSteps = amax #(abs(deltaX),abs(deltaY))
    deltaStepX = deltaX / maxSteps
    deltaStepY = deltaY / maxSteps
    for i = 0 to maxSteps do
    (
      for b = -BrushSize.value/2 to BrushSize.value/2 do
        for c = -BrushSize.value/2 to BrushSize.value/2 do
          paintBrush (currentPos + [c,b])
      currentPos += [deltaStepX, deltaStepY]
    ) 
    theCanvas.bitmap = theCanvasBitmap
  )
  on MicroPaint_CanvasRollout lbuttondown pos do
  (
    lastPos = pos
    isDrawing = true
    drawStroke lastPos pos
  )
  on MicroPaint_CanvasRollout lbuttonup pos do isDrawing = false
  on MicroPaint_CanvasRollout mousemove pos do
  (
    if isDrawing do drawStroke lastPos pos
    lastPos = pos
  )
)
createDialog MicroPaint_CanvasRollout bitmapX (bitmapY+30)
)

ステップごとの解説

--Code in italic has no changes since the previous version. macroScript MicroPaint category:"HowTo"
(
global MicroPaint_CanvasRollout
try(destroyDialog CanvasRollout)catch()
local isDrawing = false
local bitmapX = bitmapY = 512
local theCanvasBitmap = bitmap bitmapX bitmapY color:white
rollout MicroPaint_CanvasRollout "MicroPaint"
(
bitmap theCanvas pos:[0,0] width:bitmapX height:bitmapY bitmap:theCanvasBitmap colorpicker inkColor height:16 modal:false color:black across:2

ペイントブラシのカラーを定義するカラーピッカーです。

カラーピッカー

spinner BrushSize "Size" range:[1,50,10] type:#integer fieldwidth:40

ペイントブラシのサイズを定義する編集ボックスです。

編集ボックス

fn paintBrush pos = (setPixels theCanvasBitmap pos)
fn drawAPoint lastPos pos =
(
currentPos = lastPos
deltaX = pos.x - lastPos.x
deltaY = pos.y - lastPos.y
maxSteps = amax #(abs(deltaX),abs(deltaY))
deltaStepX = deltaX / maxSteps
deltaStepY = deltaY / maxSteps
for i = 0 to maxSteps do
( for b = -BrushSize.value/2 to BrushSize.value/2 do
(

この新しいループで、ブラシの縦のサイズを定義します。サイズの半分のマイナスからサイズの半分のプラスまで、合わせてフルサイズ分をカウントします。

for c = -BrushSize.value/2 to BrushSize.value/2 do

この 2 つ目のループでは、ペイントブラシの幅を定義します。ここでも、サイズの半分のマイナスからサイズの半分のプラスまで、合わせてフルサイズ分をループします。

paintBrush (currentPos + [c,b])

c ループの反復が終わるごとに paintBrush 関数を呼び出し、ストロークの現在位置に、ブラシのサイズの半分と b ループに基づいたオフセットを足した値を渡します。

)
currentPos += [deltaStepX, deltaStepY]
) 
theCanvas.bitmap = theCanvasBitmap
)
on MicroPaint_CanvasRollout lbuttondown pos do
(
lastPos = pos
isDrawing = true
drawAPoint lastPos pos
)
on MicroPaint_CanvasRollout lbuttonup pos do isDrawing = false
on MicroPaint_CanvasRollout mousemove pos do
(
if isDrawing do drawAPoint lastPos pos
lastPos = pos
) createDialog MicroPaint_CanvasRollout bitmapX (bitmapY+30)

カラーとブラシサイズの新しいユーザインタフェースコントロールを収めるには、ダイアログボックスの縦のサイズを 30 ピクセル大きくする必要があります。

結果:

前のチュートリアル:

チュートリアル - ビットマップペイントツールの開発 - ストロークの強化

次のチュートリアル:

チュートリアル - ビットマップペイントツールの開発 - エアブラシとシェイプ

チュートリアル - ビットマップ ペイント ツールの開発 - ブラシのサイズとカラー

ステップごとの解説

結果:

関連事項

チュートリアル - ビットマップペイントツールの開発 - ブラシのサイズとカラー