使用 Konva 设计甘特图
Designing a gantt view with Konva
我正在尝试使用 Konva 构建甘特图控件（为此使用 Konva 是否有意义）？我试图勾勒出下面的控件：
本来想把Konvas阶段拆解如下：
一个阶段有 4 层：activity 名称、时间线、activity 视图和滚动条视图。
滚动条层将包含一个模仿标准滚动条控件的"custom control"。
现阶段我有几个问题：
- 从事件处理的角度来看，同步不同层的最佳方法是什么？例如，如果用户单击滚动条的向下箭头形状，我需要 "scroll" 所有层向下一个单位。
- Konva 坐标系是如何工作的？形状的绘制是相对于包含层完成的吗？
- 层和组有什么区别？使用组而不是图层是否更有意义？
我意识到我的问题本质上非常广泛，但此时我需要正确设计。
我在这里回复而不是作为评论，因为我想说的比评论允许的要多。
我制作了包含 HTML 元素、另一个 canvas 库和 Konva 的甘特图。我首先将 Divs 与 jquery 一起使用，它是可行的，但我觉得它变得相当复杂，并且它 运行 在缩放视图的区域失去了动力。当然，您无法逃避复杂性。切换到 HTML5 canvas 我意识到像 Konva 这样的库会加速生产。放大 canvas 很简单。
根据@lavrton 的评论，与 GDI 或其他更成熟的技术相比，HTML5 canvas 上的文本是原始的。我对任务标签的回答是使用 off-screen 文本绘图然后转换为效果很好的图像。对于弹出式编辑，我恢复到 HTML div 等。我没有在甘特图中使用动画，但我在其他地方使用了 canvas 应该没问题 - 周围有很多 bouncy-ball / 粒子测试确认。
作为编码设计建议，无论您使用何种技术绘制甘特图，其数据模型和功能都是一致的。我建议您考虑采用分层方法，将您与绘图函数的交互包装为绘图 class 中的 class 方法，以便您可以在需要时切换绘图技术本身。这样您就可以避免选择技术 and/or 库。
转向您问题的各个方面：
层是一个有用的概念。物理上每一层都是一个 HTML5 canvas 元素。因此，一个图表中的多层实际上是同一阶段的多个 canvases。这里的好处是重绘特定层而不是整个 canvas ，这样可以节省性能。但大多数情况下，您可以忽略物理因素，继续使用行之有效的概念。
组：组是图层上形状的集合。如果你必须绘制由许多形状组成的东西，将它们分组非常有用，因为你可以将组作为一个整体移动、隐藏、删除等。例如，你可以考虑让每个任务栏至少由一个矩形和文本，作为一个组。组的一个考虑因素是组的位置和大小是包围其中形状的边界矩形的位置和大小。在您制定出一种方法之前，这可能会引起一些混乱。您会发现自己使用层和组，但主要是用于绘图控件的组。
缩放/缩放：使用 canvas 很容易。如何更改偏移量以在缩放时保持相同视图的数学运算不太容易，但同样是可以实现的。
同步滚动图层不需要任何时间来开发 - 只需为每个图层设置图层 y-position。
绘制 activity 的行网格和 days/weeks/months/etc 的列网格不应被低估为一项任务，但随着您开发它，您将学习使用的基础知识孔瓦.
最后一点 - Konva 的文档和示例可能会更好一些，但是这里和 https://konvajs.github.io/docs/ 的社区支持很好，Konva 源代码也在该站点上，因此您可以深入研究了解正在发生的事情，但如果这不是你的事，你根本不需要这样做。
我正在尝试使用 Konva 构建甘特图控件（为此使用 Konva 是否有意义）？我试图勾勒出下面的控件：
本来想把Konvas阶段拆解如下：
一个阶段有 4 层：activity 名称、时间线、activity 视图和滚动条视图。
滚动条层将包含一个模仿标准滚动条控件的"custom control"。
现阶段我有几个问题：
- 从事件处理的角度来看，同步不同层的最佳方法是什么？例如，如果用户单击滚动条的向下箭头形状，我需要 "scroll" 所有层向下一个单位。
- Konva 坐标系是如何工作的？形状的绘制是相对于包含层完成的吗？
- 层和组有什么区别？使用组而不是图层是否更有意义？
我意识到我的问题本质上非常广泛，但此时我需要正确设计。
我在这里回复而不是作为评论，因为我想说的比评论允许的要多。
我制作了包含 HTML 元素、另一个 canvas 库和 Konva 的甘特图。我首先将 Divs 与 jquery 一起使用，它是可行的，但我觉得它变得相当复杂，并且它 运行 在缩放视图的区域失去了动力。当然，您无法逃避复杂性。切换到 HTML5 canvas 我意识到像 Konva 这样的库会加速生产。放大 canvas 很简单。
根据@lavrton 的评论，与 GDI 或其他更成熟的技术相比，HTML5 canvas 上的文本是原始的。我对任务标签的回答是使用 off-screen 文本绘图然后转换为效果很好的图像。对于弹出式编辑，我恢复到 HTML div 等。我没有在甘特图中使用动画，但我在其他地方使用了 canvas 应该没问题 - 周围有很多 bouncy-ball / 粒子测试确认。
作为编码设计建议，无论您使用何种技术绘制甘特图，其数据模型和功能都是一致的。我建议您考虑采用分层方法，将您与绘图函数的交互包装为绘图 class 中的 class 方法，以便您可以在需要时切换绘图技术本身。这样您就可以避免选择技术 and/or 库。
转向您问题的各个方面：
层是一个有用的概念。物理上每一层都是一个 HTML5 canvas 元素。因此，一个图表中的多层实际上是同一阶段的多个 canvases。这里的好处是重绘特定层而不是整个 canvas ，这样可以节省性能。但大多数情况下，您可以忽略物理因素，继续使用行之有效的概念。
组：组是图层上形状的集合。如果你必须绘制由许多形状组成的东西，将它们分组非常有用，因为你可以将组作为一个整体移动、隐藏、删除等。例如，你可以考虑让每个任务栏至少由一个矩形和文本，作为一个组。组的一个考虑因素是组的位置和大小是包围其中形状的边界矩形的位置和大小。在您制定出一种方法之前，这可能会引起一些混乱。您会发现自己使用层和组，但主要是用于绘图控件的组。
缩放/缩放：使用 canvas 很容易。如何更改偏移量以在缩放时保持相同视图的数学运算不太容易，但同样是可以实现的。
同步滚动图层不需要任何时间来开发 - 只需为每个图层设置图层 y-position。
绘制 activity 的行网格和 days/weeks/months/etc 的列网格不应被低估为一项任务，但随着您开发它，您将学习使用的基础知识孔瓦.
最后一点 - Konva 的文档和示例可能会更好一些，但是这里和 https://konvajs.github.io/docs/ 的社区支持很好，Konva 源代码也在该站点上，因此您可以深入研究了解正在发生的事情，但如果这不是你的事，你根本不需要这样做。