问题标签 [konvajs-reactjs]

我想在反应应用程序中使用 konva.js 节点嵌套。我需要有关如何使用它的帮助。提前致谢。

我正在使用 Konva 构建某种图像编辑器。我有一个菜单，可以在其中选择图像并将其添加到舞台上。它工作正常，直到我添加了添加多个图像的可能性。

发布代码对于任何人来说都是非常耗时的阅读，但如果有人遇到同样的问题，......

当一个元素被选中时，一个函数将一个变量 'active' 设置为 true。在再次选择相同的元素时，“活动”将设置为 false。这完美地工作，当我通过单击它周围的任何地方将元素的“活动”变量设置为 false 时，就会出现问题。

它过去只是简单地被取消选择并留在原位，但现在当我从外部取消选择它时，整个元素变得不可见。我在每个元素上也有一个“可见”属性，但它设置为 true，并且在此过程中不会改变。

1.元素onClick功能：

2.外部取消选择功能：

现在，即使它们中的任何一个都在更改元素的任何其他属性，并且没有调用其他函数，但我不明白为什么元素在取消选择时变得不可见。

任何想法或意见都受到好评，谢谢。

为了清楚起见，'2。外部取消选择函数”调用另一个组件中的几个函数，这些函数与“1. 元素 onClick 功能'。将 active 属性设置为 false，然后从元素的 edition reducer 文件中删除该元素。

我在我的反应组件中直接使用 Konva API，它运行良好。

我只有一个大问题。

问题是当包含 ref 容器的组件被卸载时，react 应用程序崩溃，说 staging 没有容器了。

我试图在组件卸载时在舞台上调用destroy，它进入该方法但它仍然崩溃。

所以基本上，据我了解，从反应组件中调用舞台上的销毁不会从 DOM 中破坏舞台。

任何人都可以帮助解决这个问题吗？

编辑：添加代码片段

因此，每当卸载此组件时，我都会收到错误消息：“Uncaught Stage 没有容器。需要一个容器。”

另外，我试过在舞台上调用destroy，但我仍然得到同样的错误。此外，即使我在 renderKonva 中创建和销毁舞台，本质上我也不会显示任何内容，因为一旦创建舞台，它就会引发相同的错误。

我正在使用 React Konva 1.1.6 并学习如何使用它。在下面的代码中，每次我的鼠标经过 konva 箭头时，我都会尝试在鼠标指针附近显示一个标签。然而，我的标签就消失了。我的代码中是否缺少某些内容？我尝试使用e.nativeEvent，但出现错误。

我无法使用 react-konva 在两个 Rectangle 节点之间重新创建混合模式。到目前为止，我已经尝试更改节点的呈现顺序，添加额外的组并将复合操作应用于这些组并将复合操作设置为 onMount。

这是一个使用 Konva 和 vanilla js 的工作示例：

https://codepen.io/jagomez8/pen/xQwdvq

这是我正在努力实现相同效果的反应版本：

https://codepen.io/jagomez8/pen/qQOjWj

任何见解将不胜感激。谢谢！

据我所知，Konva 没有一种简单/内置的方式来创建右键单击对象的上下文菜单。我正忙于一个需要使用上下文菜单的项目，所以我想我应该创建自己的。

不用说我对 Konva 还很陌生，所以我希望 SO 上的某个人可能有更多的经验来帮助我克服最后的障碍。

我创建了一个沙盒，位于这里

要求是：

1. 对象应该是可拖动的。（我从 Konva 沙箱中复制了一个工作示例。）
2. 右键单击对象时应显示上下文菜单。
3. 上下文菜单应该是动态的，因此允许多个项目，每个项目在单击时执行自己的回调。
4. 做出选择后，应关闭上下文菜单。

到目前为止，我已经完成了大部分工作，但我正在努力解决的问题是：

1. 我不知道如何将鼠标悬停在一个上下文菜单项上，使其突出显示，然后移至下一个应突出显示的项并将旧的恢复为原始设置。
2. 移出上下文菜单会重新绘制整个对象。我不明白为什么。
3. 单击一个项目会触发两个项目的回调。为什么？我定位了被点击的特定菜单项，但同时获得？
4. 这一点不是一个错误，更多的是我不确定如何继续：如果用户在对象上多次右键单击，我将如何防止创建多个上下文菜单？从概念上讲，我知道我可以使用上下文菜单的名称搜索图层（？）中的任何项目并关闭它，但是我不知道该怎么做。

我将不胜感激任何帮助。提前致谢。

我真的很喜欢 Konva 语法

但是源代码让我感到困惑。我理解的方式<Circle /> 实际上并没有在其渲染中返回 DOM 元素。相反，它在其上方定义的 Canvas 上绘制。

它实际上是如何做到这一点的。有人可以指出我的代码

我在我的项目中使用 Konva JS，但我遇到了 Transformer 的问题。我在画布上创建了用于图像上传的边界框，我可以使用它进行操作（调整大小/移动/旋转），但是当 Transformer 控制器超出边界框时，它们会被覆盖。

是否有可能让它们一直可见？即使图像超出边界框？

演示

代码：

就像显示的形状示例一样，它具有 x、y、旋转等。https://konvajs.github.io/docs/select_and_transform/Transform_Events.html

react-konva 中的图像也扩展了形状。

如何在 react-konva 中获取图像（带变压器）的这些值。

我正在尝试转换圆圈，但它会引发错误。我不明白我已经处理过转换的问题是什么，Konva.Rect并且没有这样的错误。将变压器附加到Konva.Circle正常工作，但是当鼠标悬停在变压器锚点之一上时会引发错误。这是我将变压器连接到的方式Konva.Circle：

我Konva.Circle试图将变压器附加到的组件：

this.mouseUp调用时发生变压器连接