使用Konva设计甘特图

Question

我正在尝试使用Konva构建一个甘特图控件（为此使用Konva是否有意义）？我试图勾画下面的控件：

我正打算按如下方式分解Konvas阶段：

• 包含4个图层的一个阶段：活动名称，时间轴，活动视图和滚动条视图。

• 滚动条图层将包含一个＆＃34;自定义控件＆＃34;模仿标准滚动条控件。

在这个阶段，我有几个问题：

• 从事件处理角度来看，同步不同层的最佳方法是什么？例如，如果用户点击滚动条的向下箭头形状，我需要滚动＆＃34;滚动＆＃34;所有图层都有一个单位。
• Konva坐标系如何工作？是否相对于包含层完成了形状的绘制？
• 图层与组之间的区别是什么？使用组而不是图层更有意义吗？

我意识到我的问题本质上非常广泛，但此时我需要正确设计。

Answer 1

我在这里回答而不是作为评论，因为我还有更多话要说，而不是评论允许。

我使用HTML元素和另一个canvas lib以及Konva制作了Gantts。我首先使用了带有jquery的Divs并且它是可行的但我觉得它变得非常复杂并且在缩放视图方面它已经失去了动力。你无法掩饰当然的复杂性。切换到HTML5画布我意识到像Konva这样的lib会加速制作。放大画布很简单。

根据@ lavrton的评论，与GDI或其他更成熟的技术相比，HTML5画布上的文本是原始的。我对任务标签的回答是使用离屏文本绘图然后转换为非常好用的图像。对于弹出式编辑，我还原到HTML div等。我没有在甘特中使用动画，但我在其他地方并且画布应该没问题 - 有大量的弹力球/粒子测试来确认。

作为编码设计建议，甘特图的数据模型和功能与您使用的技术无关。我建议您考虑继续使用分层方法，其中您与绘图函数的交互被包装为绘图类中的类方法，以便您可以在需要时切换绘图技术本身。您可以通过这种方式将自己与科技和/或图书馆的选择隔离开来。

转到问题的各个方面：

• 图层是一个有用的概念。实际上，每个图层都是HTML5画布元素。因此，一个图中的多个层实际上是同一阶段的多个画布。这里的好处是重新绘制特定图层而不是整个画布，从而节省了性能。但大多数情况下，你可以忽略物理，只是继续使用并运用良好的概念。

• 组：组是图层上的形状集合。如果你必须绘制由许多形状组成的东西，对它们进行分组非常有用，因为你可以将整个组移动，隐藏它，删除它等等。例如，你可以考虑制作每个任务栏，至少由一个组成矩形和文本，作为一个组。组的一个考虑因素是组的位置和大小是包围其中的形状的边界矩形的位置和大小。在您制定方法之前，这可能会引起一些混乱。您将发现自己使用图层和组，但主要是用于绘制控件的组。

• 缩放/缩放：使用画布很容易。不太容易的是如何更改偏移以保持与缩放相同的视图的数学，但同样可以实现。

• 同步滚动图层不会花费任何时间来开发 - 只需为每个图层设置图层y位置。

• 绘制活动和行的行网格（天/周/月/等）不应低估为任务，但在开发时，您将学习使用Konva的基础知识。

最后一点 - Konva的文档和示例可能会更好一些，但是此处和https://konvajs.github.io/docs/的社区支持很好，Konva源代码也在该网站上，因此您可以直接进入了解正在发生的事情，但如果不是你的事情，你根本不需要这样做。