问题标签 [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.
reactjs - 如何在 ReactJs 中使用 Konva 节点
我想在反应应用程序中使用 konva.js 节点嵌套。我需要有关如何使用它的帮助。提前致谢。
reactjs - Konva 图像元素消失
我正在使用 Konva 构建某种图像编辑器。我有一个菜单,可以在其中选择图像并将其添加到舞台上。它工作正常,直到我添加了添加多个图像的可能性。
发布代码对于任何人来说都是非常耗时的阅读,但如果有人遇到同样的问题,......
当一个元素被选中时,一个函数将一个变量 'active' 设置为 true。在再次选择相同的元素时,“活动”将设置为 false。这完美地工作,当我通过单击它周围的任何地方将元素的“活动”变量设置为 false 时,就会出现问题。
它过去只是简单地被取消选择并留在原位,但现在当我从外部取消选择它时,整个元素变得不可见。我在每个元素上也有一个“可见”属性,但它设置为 true,并且在此过程中不会改变。
1.元素onClick功能:
2.外部取消选择功能:
现在,即使它们中的任何一个都在更改元素的任何其他属性,并且没有调用其他函数,但我不明白为什么元素在取消选择时变得不可见。
任何想法或意见都受到好评,谢谢。
为了清楚起见,'2。外部取消选择函数”调用另一个组件中的几个函数,这些函数与“1. 元素 onClick 功能'。将 active 属性设置为 false,然后从元素的 edition reducer 文件中删除该元素。
reactjs - Konva - 卸载组件时无法完全破坏反应阶段
我在我的反应组件中直接使用 Konva API,它运行良好。
我只有一个大问题。
问题是当包含 ref 容器的组件被卸载时,react 应用程序崩溃,说 staging 没有容器了。
我试图在组件卸载时在舞台上调用destroy,它进入该方法但它仍然崩溃。
所以基本上,据我了解,从反应组件中调用舞台上的销毁不会从 DOM 中破坏舞台。
任何人都可以帮助解决这个问题吗?
编辑:添加代码片段
因此,每当卸载此组件时,我都会收到错误消息:“Uncaught Stage 没有容器。需要一个容器。”
另外,我试过在舞台上调用destroy,但我仍然得到同样的错误。此外,即使我在 renderKonva 中创建和销毁舞台,本质上我也不会显示任何内容,因为一旦创建舞台,它就会引发相同的错误。
reactjs - 如果访问了 konva 元素,则显示反应 konva 标签
我正在使用 React Konva 1.1.6 并学习如何使用它。在下面的代码中,每次我的鼠标经过 konva 箭头时,我都会尝试在鼠标指针附近显示一个标签。然而,我的标签就消失了。我的代码中是否缺少某些内容?我尝试使用e.nativeEvent
,但出现错误。
reactjs - React Konva 混合模式
我无法使用 react-konva 在两个 Rectangle 节点之间重新创建混合模式。到目前为止,我已经尝试更改节点的呈现顺序,添加额外的组并将复合操作应用于这些组并将复合操作设置为 onMount。
这是一个使用 Konva 和 vanilla js 的工作示例:
https://codepen.io/jagomez8/pen/xQwdvq
这是我正在努力实现相同效果的反应版本:
https://codepen.io/jagomez8/pen/qQOjWj
任何见解将不胜感激。谢谢!
javascript - 如何创建 Konva-React 上下文菜单
据我所知,Konva 没有一种简单/内置的方式来创建右键单击对象的上下文菜单。我正忙于一个需要使用上下文菜单的项目,所以我想我应该创建自己的。
不用说我对 Konva 还很陌生,所以我希望 SO 上的某个人可能有更多的经验来帮助我克服最后的障碍。
我创建了一个沙盒,位于这里
要求是:
- 对象应该是可拖动的。(我从 Konva 沙箱中复制了一个工作示例。)
- 右键单击对象时应显示上下文菜单。
- 上下文菜单应该是动态的,因此允许多个项目,每个项目在单击时执行自己的回调。
- 做出选择后,应关闭上下文菜单。
到目前为止,我已经完成了大部分工作,但我正在努力解决的问题是:
- 我不知道如何将鼠标悬停在一个上下文菜单项上,使其突出显示,然后移至下一个应突出显示的项并将旧的恢复为原始设置。
- 移出上下文菜单会重新绘制整个对象。我不明白为什么。
- 单击一个项目会触发两个项目的回调。为什么?我定位了被点击的特定菜单项,但同时获得?
- 这一点不是一个错误,更多的是我不确定如何继续:如果用户在对象上多次右键单击,我将如何防止创建多个上下文菜单?从概念上讲,我知道我可以使用上下文菜单的名称搜索图层(?)中的任何项目并关闭它,但是我不知道该怎么做。
我将不胜感激任何帮助。提前致谢。
reactjs - KonvaJS 如何处理画布上的绘图
我真的很喜欢 Konva 语法
但是源代码让我感到困惑。我理解的方式<Circle />
实际上并没有在其渲染中返回 DOM 元素。相反,它在其上方定义的 Canvas 上绘制。
它实际上是如何做到这一点的。有人可以指出我的代码
javascript - 边界框 konva js 中的变压器控件
我在我的项目中使用 Konva JS,但我遇到了 Transformer 的问题。我在画布上创建了用于图像上传的边界框,我可以使用它进行操作(调整大小/移动/旋转),但是当 Transformer 控制器超出边界框时,它们会被覆盖。
是否有可能让它们一直可见?即使图像超出边界框?
代码:
konvajs - 如何在 react-kova 中获得像 scaleX 这样的图像属性?
就像显示的形状示例一样,它具有 x、y、旋转等。https://konvajs.github.io/docs/select_and_transform/Transform_Events.html
react-konva 中的图像也扩展了形状。
如何在 react-konva 中获取图像(带变压器)的这些值。
reactjs - 未捕获的类型错误:无法读取未定义的属性“getAbsoluteScale”
我正在尝试转换圆圈,但它会引发错误。我不明白我已经处理过转换的问题是什么,Konva.Rect
并且没有这样的错误。将变压器附加到Konva.Circle
正常工作,但是当鼠标悬停在变压器锚点之一上时会引发错误。这是我将变压器连接到的方式Konva.Circle
:
我Konva.Circle
试图将变压器附加到的组件:
this.mouseUp
调用时发生变压器连接