问题标签 [react-konva]

我正在尝试使用 findOne 和 Id 将变压器附加到元素上，打印时它会识别两个节点但不附加它，不会显示错误。下面是触发 onClick 的相关函数，节点在同级类中定义，并且不应该在为其附加定义的类上触发任何事件侦听器。

顺便说一下，所有的 props 都定义在父组件上

下面是相关的条件语句，该元素位于父组件层内的组内：

在我的 React 应用程序中，我想创建不是通常form用于创建路段的。

例如，我有这个 png 格式的方案。

但我想创建一个交互式编辑器，可以在其中创建方案，将它们保存到服务器然后重用。

我会尝试模拟一种情况

用户想要创建一个新的路段。道路有六车道。（上图）

1. 用户应该可以自己绘制此图（所有线条、圆圈、图像等）

2. 将此数据保存到服务器

然后用户想要接收关于一个特殊车道的数据。（此功能在另一个组件中取出）

因此，用户打开新组件，他可以通过他将选择的一些车道获得统计信息

1. 从服务器获取保存的方案

2. 渲染此方案并为每个车道集成复选框

选择通道后，用户将信息发送到服务器，它希望在哪个通道上接收摘要（统计信息）

我发现 Konva 框架https://konvajs.org/或 p5.js ( https://p5js.org/ )，但在我看来这种方法非常麻烦

我可以用什么来构建这样的东西？

基于Konva 网站上的URLImage 示例，我创建了一个类来使用事件侦听器将图像加载到我的画布中。

我有一个完全由透明背景上的白色像素组成的 PNG。我想将白色像素着色为纯色（例如，红色、紫色或青色）。我查看了过滤器示例，但我无法理解这些特定部分是如何组合在一起的。

我如何使用 react-konva.Image （例如，使用<Image filters={[...]} image={...} ref={node => {this.imageNode = node;} />）来做到这一点？

这是我上面提到的 TypeScript 类：

我有一个<Group/>包含一个矩形和一组图标的元素，该元素只有在用户将光标移动到其<Group/>内容的边界内时才可见。图标是否显示由附加到对象onMouseOver的事件处理程序触发。我使用挂钩来保存悬停状态并隐藏/显示图标。onMouseOut<Group/>useState

显示图标onMouseOver工作正常。但是每当鼠标光标悬停在图标上时，就会触发 的onMouseOut事件<Group/>，从而隐藏图标。将鼠标移到图标上会快速显示/隐藏它们（闪烁）。

如果光标实际上仍在其区域内但在图标顶部（事件冒泡？），是否有办法强制<Group/>不触发事件？onMouseOut

我正在使用 Konvajs，我有一组文本，并且我希望不允许在画布之外拖动组，我尝试使用 dragBoundFunc 解决了这个问题，但这对我没有帮助，现在我只是尝试更改组位置在 dragmove 期间，但是 setPosition、setAbslutePosition，没有任何东西可以让我更改组位置

抱歉，我是编码新手，并且在我认为非常基本的事情上苦苦挣扎。

我想通过多个 konva 线对象绘制一个形状。一旦我创建了一条线，而不是手动计算下一行应该从哪里开始，我认为必须有一种方法来获取最后一行的结束位置并将其设置为新行的起点。

正如你在下面看到的。我一直在手动计算起始值。

I create text on canvas using KonvaJS. And I can freeze the text using Transformer. While drawing, the origin remains in the center as I wish there is no problem here. However, when I want to use the data with svg here, x andy come true without freezing. But when I do ice cream it freezes outside the center. Here

It works when I freeze using it. Because x and y values are not changing. However, while drawing on KonvJs, if I freeze, the values of xtation andy change together with the value of ratation. The code between the shortened example.

It will be enough to work in the section I made by giving offset in the convention. The important example is that I can show with svg on the client side. React Native Svg

我在第一个示例中使用了https://konvajs.org/docs/sandbox/Free_Drawing.html，但也在阶段添加了图像。但是当我删除画线时，图像也被删除了。我该如何解决

我使用 useContext 作为全局状态解决方案。我有一个包含我的状态的 Store.jsx 和一个减少的 reducer.jsx。我正在使用 Konva 在 HTML5 Canvas 上创建一些形状。我的目标是当我单击一个形状时，我想通过引用活动的内容来更新我的全局状态，当我再次单击时，清除引用。

我的完整代码可以在这里找到： https ://codesandbox.io/s/staging-platform-2li83?file=/src/App.jsx

问题：

问题是当我通过形状的 onClick 事件更新全局状态时，它说引用是“null”，但是当我 console.log 在 onClick 中的引用时，我可以看到正确的引用。

我认为我错过了关于 useRef 工作原理的重要一点。

当我想到这一点时，这就是我脑海中出现的流程：

我创建了一个画布，并映射了一组矩形属性。这将创建 4 个矩形。我使用一个返回矩形的包装器组件。

在 RectWrapper 内部，我创建了一个引用，将其传递给 Rect 的 ref 属性。在 onclick 函数中，当我控制台日志“shapeRef”时，我只在调度被注释掉时才看到引用。如果我取消注释调度，则它显示为空，如果我控制台记录状态，则引用始终为空。

也许我正在使用钩子以错误的方式解决这个问题。我只是想保持单击的全局状态，因为另一个文件中的组件将依赖于这种状态。

我正在尝试处理从子组件中提升 ref 的问题。

我的父组件：

和孩子：

不幸的shapeRef.current是，我在 componentDidMount 期间未定义，我真的不知道是什么导致了这种行为。

如果有人向我解释为什么会发生这种情况，我会很高兴。谢谢你。