将 Vanilla JS Canvas 方法与 Konva Stage 结合使用并解决缺失的功能

Question

我正在开发一个网络项目，涉及创建像Canva这样的网站。由于其易于使用和交互功能，我决定使用 Konva 库来管理基于画布的图形。但是，我对 Konva Stage 中普通 JS Canvas 方法的集成以及如何处理 Konva 可能缺乏某些功能的情况有一些疑问。

这是我目前正在努力实现的目标的示例，（只是一个示例）

var canvas = new Konva.Stage({
  container: "canvas", // id of container <div>
  width: 1000,
  height: 1000,
});

const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

在上面的代码中，我创建了一个 Konva Stage，然后尝试使用 Canvas 2D 上下文 (ctx) 在舞台上绘制一个绿色矩形。我知道 Konva 提供了自己的一套方法来绘制形状和管理交互，但我想知道是否可以以这种方式与 Konva 一起使用普通 JS Canvas 方法。

此外，我担心 Konva 可能缺乏普通 JS Canvas API 中提供的某些功能。如果我遇到 Konva 无法满足要求并且需要使用 vanilla JS 实现功能的情况，推荐的方法是什么？

任何见解、最佳实践或示例将不胜感激。我想确保我有效地使用 Konva，同时也准备好应对潜在的限制。

提前感谢您的帮助！

Answer 1

有一篇博客文章here给出了一些关于选择用于画布的库的想法。它没有具体涵盖您的问题（我稍后会讨论），但它有一些辅助信息，您可能会发现这些信息对于选择库以及为什么我发现 Konva 是一个合理的候选者很有用。

问题。我可以在同一个画布上混合使用画布库和纯 JS 吗？

TLDR：是也不是，但你不会想要。

没有部分

no 部分与画布库将负责它自己的重画这一事实有关。对象类型库，在这个问题的上下文中意味着 Konva，将允许您将形状创建为对象 - 这里的关键部分是库管理对象的绘制，您只需要求创建/定位它们/等.lib 绘制了它们。然后，该库会侦听任何可能导致需要重绘的内容，并为您执行此操作。您对此几乎没有控制权，事实上您不会想要它 - 您将重新创建库的核心。这意味着，如果您向画布添加一些由 lib 驱动的对象，然后使用纯 JS 在画布表面上“手动”绘制一个绿色矩形，lib 可能会清除表面并在短时间内重新绘制其形状对象，删除你画的东西，所以你必须听并再次画你的矩形。这甚至没有考虑 z 顺序的复杂性以及绿色矩形在该上下文中的位置。

是的部分

我无法谈论其他库，但就 Konva 而言，你可以使用“自定义形状”来玩 Javascript。自定义形状是 Konva 宇宙中的一流形状对象，但 Konva 希望您提供一些使其自定义的东西。其中的关键是 sceneFunc()，它是包含画布绘制命令的每个 Konva 形状内的函数。回到问题中绿色矩形的示例，您可以创建一个自定义形状并放置 JS 以在其 sceneFunc() 内显示绿色矩形。现在，一大堆好处映入眼帘 - Konva 将以正确的 z 顺序绘制您的形状，您可以使用变压器来旋转和缩放/调整您的形状（有一些警告，但完全可行），您的自定义形状将有事件侦听器并且无需额外代码即可拖动。就画布绘制而言，自定义形状可以像您需要的那样复杂。经过一番思考后应该会清楚，自定义形状是一个非常非常有用的东西。

问题：如果我不想使用自定义形状怎么办？

答案：如果不需要混合标准 Konva 形状和 JS 代码“绘图” - 就像您的“绘图”将是背景而 Konva 形状是前景 - 那么您可以将画布一层一层地或堆叠在一起。将你的“画”放在下面的画布上，并将 Konva 指向顶部。现在您的画布和 Konva 之间将不再有干扰。

想法：我知道你需要花时间选择一个库，并且需要做出有利可图的选择。看看我上面链接的博客文章，因为它有一些关于如何进行选择的指导。我真的不明白你担心 Konva 可能缺少什么而导致你需要普通的 JS。如果您能举个例子，我相信我们能够为您提供有关如何使用 Konva 处理该问题的诚实观点。使用库的要点是，如果它是一个好的库，您可以专注于应用程序的用例/业务需求，而不是如何在普通 JS 中绘制形状。