Flex/ActionScript更改形状填充颜色
以下是我的代码:Flex/ActionScript更改形状填充颜色,actionscript,colortransform,Actionscript,Colortransform,以下是我的代码: private function drawRect():Sprite{ var rect:Sprite = new Sprite(); rect.name = "rectName"; rect.graphics.beginFill(0xffff00); rect.graphics.lineStyle(1,0x000000); rect.graphics.drawRect(0,0,6,6); rect.graphics.endFill();
private function drawRect():Sprite{
var rect:Sprite = new Sprite();
rect.name = "rectName";
rect.graphics.beginFill(0xffff00);
rect.graphics.lineStyle(1,0x000000);
rect.graphics.drawRect(0,0,6,6);
rect.graphics.endFill();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
return rect;
}
private function changeColor(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0x00ffff;
e.target.transform.colorTransform = newColor;
}
private function changeColorBack(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0xffff00;
e.target.transform.colorTransform = newColor;
}
changeColor和changeColorBack函数可以工作,但不是我希望它们的工作方式。它们改变了我的精灵的整个颜色,包括矩形周围的线条边框(笔划)。我只想更改矩形内部的颜色,并保持矩形的边框。我在ColorTransform中看不到允许我指定线条样式的属性,因此是否有其他方法来更改矩形的填充颜色并保持其周围的边框?
ColorTransform
适用于整个MovieClip
,无论其图形属性中绘制了什么。您可以在每次需要时重新绘制矩形:
import flash.display.Sprite;
function drawRect(target:Sprite, clr:Number):void{
target.graphics.clear();
target.graphics.beginFill(clr);
target.graphics.lineStyle(1,0x000000);
target.graphics.drawRect(0,0,6,6);
target.graphics.endFill();
}
function changeColor(e:MouseEvent):void{
drawRect(Sprite(e.target), 0x00ffff);
}
function changeColorBack(e:MouseEvent):void{
drawRect(Sprite(e.target), 0xffff00);
}
var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);
drawRect(rect, 0xffff00);
或者,如果出于某种原因而设置使用ColorTransform
,则可以用两个单独的精灵(一个外部精灵和一个内部精灵)构建轮廓矩形,并仅使用ColorTransform
将内部精灵作为目标:
import flash.display.Sprite;
function getRectangle(w:Number, h:Number, x:Number, y:Number, clr:Number):Sprite{
var sprite:Sprite = new Sprite();
sprite.name = "rectName";
sprite.graphics.beginFill(clr);
sprite.graphics.drawRect(x, y, w, h);
sprite.graphics.endFill();
return sprite;
}
function changeColor(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0x00ffff;
inner.transform.colorTransform = newColor;
}
function changeColorBack(e:MouseEvent):void{
var newColor:ColorTransform = new ColorTransform();
newColor.color = 0xffff00;
inner.transform.colorTransform = newColor;
}
var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);
// Outer rectangle for the outline
var outer:Sprite = getRectangle(8, 8, 0, 0, 0x000000);
rect.addChild(outer);
// Smaller inner rectangle which can be targeted with the color transform
var inner:Sprite = getRectangle(6, 6, 1, 1, 0xffff00);
rect.addChild(inner);
谢谢你的回复。我已经想到了这两种解决方案,但在这篇文章中没有实现它们。我希望不必重新绘制或创建另一个儿童精灵。现在,我觉得在正方形周围加一个精灵会更容易一些。实际上,我选择了第一个选项,重画正方形。