使用着色器作为绘图填充

原文：http://www.pixelbender.cn/?p=68 （原文代码有许多错误，请测试时一一校正）

 

在使用着色器创建绘制填充 时，您将使用绘图 API 方法来创建矢量形状。正如使用绘图 API 可将任何位图图像用作位图填充一样，着色器的输出将用于填充该形状。

 

var canvas:Sprite = new Sprite();
canvas.graphics.beginShaderFill(myShader);
canvas.graphics.drawRect(10, 10, 150, 150);
canvas.graphics.endFill();
// add canvas to the display list to see the result

 

beginShaderFill() 方法注意点

• 参数 Shader： 无需 指定图像输入 。
• 调用 clear () 方法会清除填充 。
• 只要绘制 3 个或更多个点 ，或者调用 endFill() 方法时，应用程序就会呈现填充 。

 

private function onLoadComplete(event:Event):void
{
	shader = new Shader(loader.data);
        // 给着色器参数赋值
	shader.data.point1.value = [topMiddle.x, topMiddle.y];
	shader.data.point2.value = [bottomLeft.x, bottomLeft.y];
	shader.data.point3.value = [bottomRight.x, bottomRight.y];
	this.addEventListener(Event.ENTER_FRAME, updateShaderFill);
}

private function updateShaderFill(event:Event):void
{
	colorAngle += 0.6;
	var c1:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle);
	var c2:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle + d120);
	var c3:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle - d120);
        // 给着色器参数赋值
	shader.data.color1.value = [c1, c2, c3, 1.0];
	shader.data.color2.value = [c3, c1, c2, 1.0];
	shader.data.color3.value = [c2, c3, c1, 1.0];

	canvas.graphics.clear();
        // 开始绘图，三个点即可
	canvas.graphics.beginShaderFill(shader);
	canvas.graphics.moveTo(topMiddle.x, topMiddle.y);
	canvas.graphics.lineTo(bottomLeft.x, bottomLeft.y);
	canvas.graphics.lineTo(bottomRight.x, bottomLeft.y);
	canvas.graphics.endFill();
}