问题标签 [konvajs-reactjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
715 浏览

reactjs - 如何在 ReactJs 中使用 Konva 节点

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

0 投票
1 回答
329 浏览

reactjs - Konva 图像元素消失

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

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

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

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

1.元素onClick功能:

2.外部取消选择功能:

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

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


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

0 投票
1 回答
656 浏览

reactjs - Konva - 卸载组件时无法完全破坏反应阶段

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

我只有一个大问题。

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

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

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

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

编辑:添加代码片段

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

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

0 投票
1 回答
817 浏览

reactjs - 如果访问了 konva 元素,则显示反应 konva 标签

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

0 投票
1 回答
255 浏览

reactjs - React Konva 混合模式

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

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

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

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

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

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

0 投票
2 回答
2921 浏览

javascript - 如何创建 Konva-React 上下文菜单

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

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

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

要求是:

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

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

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

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

0 投票
1 回答
209 浏览

reactjs - KonvaJS 如何处理画布上的绘图

我真的很喜欢 Konva 语法

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

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

0 投票
1 回答
984 浏览

javascript - 边界框 konva js 中的变压器控件

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

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

演示

代码:

0 投票
1 回答
443 浏览

konvajs - 如何在 react-kova 中获得像 scaleX 这样的图像属性?

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

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

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

0 投票
1 回答
469 浏览

reactjs - 未捕获的类型错误:无法读取未定义的属性“getAbsoluteScale”

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

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

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