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

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

全体の流れ:

既存の 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

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

spinner

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 ピクセル大きくする必要があります。

)

結果

前のチュートリアル:

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

次のチュートリアル:

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