1

我在 Flex 中制作了一个程序，用于创建简单的时间表，类似于 MS Project 或 Vico Control。我有一个问题想解决。（你可以在这里看到：OnTime Project Scheduling tool made in Flex

计划的任务表示为甘特图，为此我在 DataGrid 的其中一行中创建了一个 itemRenderer。任务显示为甘特图，但我还想显示任务之间的连接性。

请看下面的图片，看看我想在这里完成什么：（上面是数据网格现在的样子，下面是我想添加的东西） alt text http://img202.imageshack .us/img202/1399/gantt.jpg

关于如何在 DataGrid 的项目渲染器中执行此操作的任何建议？

非常感谢拉迪斯拉夫

4

1 回答 1

1

好的，这就是你需要做的。

  1. 在您的 dataProvider 中，有一个字段是一个包含以下属性的对象（您应该将其设为一个类）： start:Number (percentage) length:Number (percentage) index:int [optional props isFirst:Boolean, isLast:Boolean]

  2. 使用容器（比方说 Canvas）创建 itemRenderer，并使用图形类绘制一个矩形，其左边缘对应于 start 属性。这将是 itemRender 宽度的百分比，并且可以从您将覆盖的类的 updateDisplayList 受保护方法中的 unscaledWidth 确定。同样，矩形的宽度对应于对象的长度属性，以 Canvas 宽度的百分比表示。给它任何你喜欢的高度。

  3. 绘制连接器。再次使用图形类在矩形边内外绘制水平线。给这些一个恒定的长度。从水平线的末端画线：左侧的最高为 0，右侧的最高为 this.height。

  4. 弄清楚你需要画多远的中间连接器才能让它看起来连接到它上面的线。这只需要对 itemRenderer 的顶部进行。

  5. 如果 isStart=true（对象索引为 0），则不要在矩形的左侧或顶部绘制任何内容。如果 isEnd=true（对象的索引是 ArrayCollection.length -1），则不要在右侧或底部绘制任何内容。

你完成了。您将需要了解如何使用图形对象进行绘制，但这很容易，并且无论如何您都应该在您的曲目中拥有一些东西。

于 2010-05-20T15:30:23.490 回答