在 Flex 中使用图形

Question

我只是在浏览用于绘制一张图表的代码。这段代码写在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

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

Answer 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 Graphics 类页面以获取更多信息。

---

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

Answer 3

Degrafa 使这种事情变得更加容易。