问题标签 [react-konva]

在 Konva（准确地说是 React-Konva）上，有一个 Stage 带有一个带有图像的图层。单击该图像会给出单击该图像的位置。但拖动后（舞台或图像），位置不同。

在 React-Konva 代码中，这看起来基本上是这样的：

MyImage 组件：

（是的，我修改了useImage React-Hook也返回了宽度和高度）

clickHandler 非常简单：

问题是单击该图像确实给了我一个位置，这看起来不错。但是当我拖动图像时，由于舞台上的'draggable={true}'（因此，准确地说是'拖动舞台'）然后再次单击图像中的相同位置，我得到另一个位置。这可能很明显，因为它给了我点击在舞台上的位置，而不是点击在图像上的位置。

当使舞台不可拖动和图像可拖动时，同样的问题也适用。

所以，问题仍然存在：

当图像（或其舞台）可拖动时，如何获取图像上单击的位置？

我正在尝试Konva.Rect用作图像过滤器的叠加层。当使用带有透明色标的径向渐变时，在 IOS 模拟器上它可以完美运行，但在设备上它无法识别透明并用纯色填充它。

我尝试使用transparent，rgba(0,0,0,0)但结果是一样的。有什么替代方法可以尝试吗？

这是我的示例代码；

我试图通过允许两个节点（类的形状）被双重引用（A 连接到 B with和 B 连接到 A with ）来扩展Connected Objects演示。我使用包。CircleArrow1Arrow2react-konva

我已经在Code Sandbox上实现了一个带有一些基本功能的演示。

在线5，6你会找到节点信息，在线21有一个高阶组件，它根据起始节点和结束节点的位置创建箭头。

在默认示例中，箭头按预期工作。如果您尝试将值设置redNode.x为300箭头重叠。当blueNode.x等于时也会发生同样的情况-100。这与我计算箭头的方式有关（我怀疑线上的方程38）。

另请注意，随着redNode.x移动到 value 300，两个箭头彼此接近（这也发生在其他值上），这是我不希望发生的事情。当两个节点改变位置并且不重叠或相互接近时，我希望箭头具有相同的形状。不幸的是，我缺乏数学并不能帮助我解决问题。我还尝试使用quadraticCurveTo方法创建自定义形状但没有成功。

在此先感谢您的帮助。我感谢所有的解决方案。

我想在 react-konva 中创建一个加权有向图。到目前为止，我所做的是创建节点并使用Arrow组件连接它们。下一步是在箭头上添加一个标签，表示边缘的权重。主要思想是将箭头和文本组件组合在一起。文本的位置将由箭头的中点定义。这已成功完成。当文本包含超过 1 个字符时会出现问题。我希望文本的中间位于箭头的中间。我尝试了不同的公式，但找不到任何解决方案。

我提供了一个关于代码沙箱的活生生的例子。默认文本0按预期工作。现在，尝试使用不同的字符串，例如54856. 您会看到字符串越长，Y 位置增加的越多。此外，文本不在不同位置的箭头中间居中。

该问题被标记为，react-konva但您不必知道库就可以做出贡献。在第 53 行，我们使用带有数学公式的变量来计算文本位置。如果您对几何学有足够的了解来解决它，我将非常乐意接受您的回答！

要更好地了解我的想法，请查看此应用程序。尝试移动节点并查看箭头中的文本始终居中。

我正在使用 react-konva 渲染大型遗传数据集，而且我对 konva 和 react-konva 都很陌生。它易于使用的 api 对代码迭代非常有帮助。但是，我遇到了渲染数万/数十万个<circle /> or组件的缩放问题。目前，我只是映射数据集并返回一个圆圈或矩形，因为代码很容易读/写。konva 是在每个形状上执行 draw() 还是已经批处理了绘制调用？有没有更好的方法，还是建议我改用香草画布或查看 gl 画布选项？

伪/缩写代码说明了我目前在下面做的事情：

代码示例显示了我尝试过的内容。我曾经<FastLayer />尝试让它更轻一些。

结果加载缓慢，当我检查 chrome dev-tools 中的内存时，我看到每个 Circle 都是单独保存的。

Konva 库有一个有用的性能优化列表。我正在使用 react-konva 编写一个应用程序，并且想特别知道在卸载组件以防止内存泄漏时是否有任何工作要做。我是否需要销毁（）任何 konva 元素进行清理？

我正在使用 react-konva，其中我有一个包含所有 konva 对象的数组，并且我有一个函数可以将所选对象带到该数组的前面或后面，以在我的 kanvas 上创建图层。

当我触发此函数时，数组中对象的顺序工作正常，但所有对象的变换更改都丢失了，我该怎么做才能在数组更改期间不丢失此参数？

循环

带变压器的基本组件

由于 Dom 元素，我在使用 react-konva 时遇到了问题。当我尝试添加一个函数来根据 dom 的大小调整 konva 的屏幕大小时。添加图层后出现此错误。

它在那个阶段引发错误

错误消息：TypeError：阶段未定义

我正在尝试在 中实现这个 Stack Overflow 问题的最佳答案 ，react-konva但停留在这行代码上：

• 我们如何创建具有 9 个参数的 Image 组件？
• canvas我们将哪个元素添加到第二个Image组件以及如何添加？

我，我试图通过包 react -konva 学习如何使用画布。我找到了我需要用 javascript 编写的确切内容，但我需要让它像反应组件一样，并在按钮单击矩形的地方添加图像。谁能帮我重新组织代码以在反应中显示它......这是我在网上找到的小提琴...... https://jsfiddle.net/kiksy/jqo2h3dx/2/