在 Flex 中使用图形答案

【问题标题】：Playing with Graphics in Flex在 Flex 中使用图形
【发布时间】：2010-02-17 08:10:25
【问题描述】：

我只是在浏览用于绘制一张图表的代码。这段代码写在ColumnChart的ItemRenderer的updateDisplayList函数中。我不擅长 Flex 的图形部分。谁能解释一下这段代码在做什么？我可以看到最终输出，但不确定这是如何实现的。

var rc:Rectangle = new Rectangle(0, 0, width , height);
var g:Graphics = graphics;

g.clear();        
g.moveTo(rc.left,rc.top);
g.beginFill(fill);
g.lineTo(rc.right,rc.top);
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
g.endFill();

问候，PK

【问题讨论】：

标签： apache-flex actionscript-3 flex3 adobe

【解决方案1】：

该代码正在绘制一个矩形，尽管是以一种迂回的方式。 flash 中的绘图 api 使用“绘图头”。除了节省一些打字之外，我看不出使用g 代替graphics 的任何理由。 g.clear() 删除之前绘制的任何内容。 g.moveTo(rc.left, rc.top) 将其移动到位，在本例中为矩形 (0,0) 的左上角。 g.beginFill(fill) 开始填充，这并不奇怪。 g.lineTo(x, y) 调用将绘制头移动到矩形的四个角，最后g.endFill() 完成填充。

这样做可以得到相同的结果：

graphics.clear();
graphics.beginFill(fill);
graphics.drawRect(0, 0, width , height);
// this last call is only needed if you're going to draw even more, 
// if not you can omit that too
graphics.endFill();

【讨论】：

【解决方案2】：

它基本上画了一个矩形。

//clear any existing drawings
g.clear();

设置当前绘制位置为矩形的左上角，即0, 0

g.moveTo(rc.left,rc.top);

//start filling with the color specified by `fill`
g.beginFill(fill);

从当前位置（左上角）向矩形的右上角画一条线。 lineTo 方法更新当前位置，以便后续绘图从新点开始。

g.lineTo(rc.right,rc.top);

绘制矩形的其余边：

g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);

//end the fill.
g.endFill();

查看livedocs page for Graphics class 了解更多信息。

Flex 中的所有可视化组件都直接/间接地继承自 UIComponent 类。 UIComponent 的 updateDisplayList 方法绘制对象和/或大小并定位其子项。这是一种高级方法，您可以在创建UIComponent 的子类时覆盖它。当您在子类中覆盖它时，您应该使用正确的参数调用super.updateDisplayList，以确保正确更新基类组件。

【讨论】：

感谢 Amarghosh 和grapefrukt，我正在添加更多内容。在所有这些代码之前，它正在调用 super.updateDisplayList(unscaledWidth, unscaledHeight);在方法中。这实际上会做什么？

【解决方案3】：

Degrafa 让这种事情变得更容易。

【讨论】：