actionscript-3 - 中央にアルファ正方形がある正方形を描くにはどうすればよいですか

Question

私は正方形を描く方法を知っています：

graphics.moveTo(0, 0);
graphics.beginFill(0x00ff00, 1);
graphics.lineTo(point, 0);
graphics.lineTo(point, point);
graphics.lineTo(0, point);
graphics.lineTo(0, 0);
graphics.endFill();

最初の正方形の内側にアルファ 0.5 の別の正方形を描くにはどうすればよいでしょうか。

Answer 1

次のスニペットは、緑色の正方形を描画し、正方形をその中心に差し引きます (ライブ デモ)。

// Size of the main square
var point:uint = 100;

// Create two sprites
var s1:Sprite = new Sprite();
var s2:Sprite = new Sprite();

// Shortcuts to graphics objects
var g1:Graphics = s1.graphics;
var g2:Graphics = s2.graphics;

// Draw the main square
g1.beginFill(0x00ff00, 1.0);
g1.drawRect(0, 0, point, point);
g1.endFill();

// Draw the eraser square 
g2.beginFill(0x000000, 0.5);
g2.drawRect(0, 0, point/2, point/2);
g2.endFill();

// Configure blend modes to erase the center of the first square
s1.blendMode = BlendMode.LAYER;
s2.blendMode = BlendMode.ERASE;

// Add the eraser square to the first one and adjust its position
s1.addChild(s2);
s2.x = s2.y = point/4;

// Add the first square to the stage
addChild(s1);

Answer 2

var squ1:Sprite = new Sprite();
with(squ1.graphics){
    beginFill(0xFF0000);
    drawRect(0,0,100,100);
    endFill();
}
addChild(squ1);
var inSq:Sprite = new Sprite();
with(inSq.graphics){
    beginFill(0x00FF00,.5);
    drawRect(0,0,25,25);
    endFill();
}
squ1.addChild(inSq);
inSq.x = squ1.width/2 - inSq.width/2;
inSq.y = squ1.height/2 - inSq.height/2;

Answer 3

ブレンド モードを使用しなくても、塗りつぶしを終了する前に必要な部分を描画 (消去) することで、描画された形状の一部を除外できます。

次に例を示します。

import flash.display.Shape;

var squares:Shape = new Shape();
squares.graphics.beginFill(0xFF0000, 1.0);
squares.graphics.drawRect(0, 0, 200, 200);
squares.graphics.drawRect(50, 50, 100, 100); //exclude
squares.graphics.endFill();
squares.graphics.beginFill(0x0000FF, 0.5);
squares.graphics.drawRect(75, 75, 100, 100);
squares.graphics.endFill();

addChild(squares);