如何在中心绘制一个带有alpha方形的正方形

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();

现在我如何在第一个方格内绘制另一个方格，其中alpha为0.5？

Answer 1

以下代码段将绘制一个绿色方块，然后将一个方块减去其中心（live demo）。

// 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);