问题标签 [konvajs-reactjs]

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

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

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

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

我使用 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”时，我只在调度被注释掉时才看到引用。如果我取消注释调度，则它显示为空，如果我控制台记录状态，则引用始终为空。

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

我的 KonvaJs 舞台上有 2 层。前面或最上面的图层包含形状（即圆形或矩形）。背面的图层是一个尺寸为 3200x3200 的图像（这将作为背景图像）。我的舞台只有1024x1024。现在我的图层在背面（即图像）可拖动。这将使我可以自由地以我想要的方式定位图像。

但是，每当我将舞台导出为 PNG 时，它都不包括图层的最终位置。导出确实适用于所有图层和形状。但是作为背景图像的背面图层被导出为最初的定位方式。不是移动后的最终位置onDragEnd。下面是我获取图像数据的简单脚本。

有没有人知道如何正确导出具有更新的图层位置的舞台？

非常感谢任何回应。

此致，

enter code here我们可以在 konva js 中为橡皮擦工具实现对象擦除吗？实际上，如果我们在将线条从一个地方移动或拖动到另一个地方时遇到问题，我需要擦除免费的绘图线。为了克服这个问题，任何人都可以建议我如何在 konva js 中实现对象橡皮擦或将自由绘制的线和橡皮擦线分组。

react-konva 中的舞台组件是否有鼠标进入和鼠标离开事件侦听器？当用户鼠标进入、移动和离开画布时，我需要实现类似于 Figma 的协作指针。尝试在 Stage 组件上使用 onMouseEnter 和 onMouseLeave，以某种方式它会在光标触摸 Rect、Circle 和 Arrow 组件时进行侦听。

我正在尝试为 Stage 元素设置纵横比，但没有任何运气。

例如，使用画布，我会为风景写以下内容：

这将导致当前 div 中包含具有所需纵横比的画布。当我需要风景时，我会将纵横比更改为 6 / 19；

我想在 React 中创建绘图应用程序，为了实现这一目标，我遇到了一个叫做 Konvajs 的东西。然后，我开始并以某种方式实现了我可以画出这样的非直线

但我想画的是这样的直线

和矩形。这是我的代码：

我正在尝试创建 2 个不能重叠的图层（图像），因此它们仍然可以自由拖动，但不会相互显示。

我尝试过使用 zIndex 或空白 Rect，但无法弄清楚如何制作 2 个不能重叠的可拖动图层（非常类似于溢出：隐藏行为）

附上一个 GIF 来显示问题，每一层都不应该在分隔线后面可见。

)

我很享受通过 react 和 typescript 学习 KonvaJS。

我在组件上有一个单击处理程序，它将在单击它的 x 和 y 坐标处创建一个新星。它通过将 x 和 y 坐标添加到 state 来做到这一点。

该坐标数组被映射到渲染层中的星星。

我想知道的是为 Stage 组件推荐的方法来了解是否单击了空白区域或是否单击了星号。

如果单击了一颗星，我想将其从状态中删除，但目前舞台正在那里添加一颗新星。

有没有办法让一个子组件，一颗星，与它的祖父母，舞台沟通，让它知道它已经被点击了，因此删除这个星，而不是添加另一个？