问题标签 [konvajs-reactjs]

在 Konva（准确地说是 React-Konva）上，有一个 Stage 带有一个带有图像的图层。单击该图像会给出单击该图像的位置。但拖动后（舞台或图像），位置不同。

在 React-Konva 代码中，这看起来基本上是这样的：

MyImage 组件：

（是的，我修改了useImage React-Hook也返回了宽度和高度）

clickHandler 非常简单：

问题是单击该图像确实给了我一个位置，这看起来不错。但是当我拖动图像时，由于舞台上的'draggable={true}'（因此，准确地说是'拖动舞台'）然后再次单击图像中的相同位置，我得到另一个位置。这可能很明显，因为它给了我点击在舞台上的位置，而不是点击在图像上的位置。

当使舞台不可拖动和图像可拖动时，同样的问题也适用。

所以，问题仍然存在：

当图像（或其舞台）可拖动时，如何获取图像上单击的位置？

我试图通过允许两个节点（类的形状）被双重引用（A 连接到 B with和 B 连接到 A with ）来扩展Connected Objects演示。我使用包。CircleArrow1Arrow2react-konva

我已经在Code Sandbox上实现了一个带有一些基本功能的演示。

在线5，6你会找到节点信息，在线21有一个高阶组件，它根据起始节点和结束节点的位置创建箭头。

在默认示例中，箭头按预期工作。如果您尝试将值设置redNode.x为300箭头重叠。当blueNode.x等于时也会发生同样的情况-100。这与我计算箭头的方式有关（我怀疑线上的方程38）。

另请注意，随着redNode.x移动到 value 300，两个箭头彼此接近（这也发生在其他值上），这是我不希望发生的事情。当两个节点改变位置并且不重叠或相互接近时，我希望箭头具有相同的形状。不幸的是，我缺乏数学并不能帮助我解决问题。我还尝试使用quadraticCurveTo方法创建自定义形状但没有成功。

在此先感谢您的帮助。我感谢所有的解决方案。

有两个可移动的矩形，它们之间是一个连接它们的箭头。如果箭头的路径中有第三个矩形，它将是必要的，它将绕过它而不穿过它

我使用konva-react实现了两个带有箭头的移动矩形的连接，你需要让箭头在穿过矩形时绕过它

我想在 react-konva 中创建一个加权有向图。到目前为止，我所做的是创建节点并使用Arrow组件连接它们。下一步是在箭头上添加一个标签，表示边缘的权重。主要思想是将箭头和文本组件组合在一起。文本的位置将由箭头的中点定义。这已成功完成。当文本包含超过 1 个字符时会出现问题。我希望文本的中间位于箭头的中间。我尝试了不同的公式，但找不到任何解决方案。

我提供了一个关于代码沙箱的活生生的例子。默认文本0按预期工作。现在，尝试使用不同的字符串，例如54856. 您会看到字符串越长，Y 位置增加的越多。此外，文本不在不同位置的箭头中间居中。

该问题被标记为，react-konva但您不必知道库就可以做出贡献。在第 53 行，我们使用带有数学公式的变量来计算文本位置。如果您对几何学有足够的了解来解决它，我将非常乐意接受您的回答！

要更好地了解我的想法，请查看此应用程序。尝试移动节点并查看箭头中的文本始终居中。

这在 DOM 中非常简单，因为我可以在 css 中进行 object-fit:cover 并且图像会裁剪并填充宽度和高度。但在 Konvajs 中，默认值似乎是填充它。

这是我尝试过的：

这行不通。

我正在使用react-konva，并且我有两个Circle想要连接的组件Line。我已经通过硬编码实现了这一点，但我想让它具有交互性。

我的目标：当我单击一个Circle组件时，它会创建一个Line组件。然后，如果我点击另一个Circle，两者都会被连接Line。

我的问题：我不知道该怎么做。我对想法持开放态度。

我一直在使用 react-konva 遇到这个问题，当我在数组中删除一个形状时，所有形状都会移动到初始位置，并且如果该形状位于已删除形状上方的一个位置并且具有相同的组件名称，例如：deleted == =RegularPolygon 和上面的一个===RegularPolygon，比它占用被删除组件的相同位置以及相同的大小和旋转。我尝试将索引更改为删除时的最远位置，并尝试拼接以删除并放置在数组的顶部，但它仍然无法正常工作。使用 strictMode 会使形状在删除时变大，并且不会保持其初始大小。从数组中删除形状时，我只希望所有形状保持相同的位置、大小和旋转，我该怎么做？

代码很大，但这里是相关的块：

家长说：

移除元素：

移除元素 = () =>{

舞台层：

子组件渲染并返回：

我很乐意展示一个使用 Skype、Slack 或任何其他屏幕共享平台的演示。谢谢

我正在使用 strokeScaleEnabled=false 来禁用笔触宽度缩放。但是，当我缩放舞台时，阴影偏移仍在缩放。我看不到“shadowOffsetScaleEnabled”属性来禁用阴影偏移缩放。

是否有任何其他 API 或者我必须根据舞台比例重新计算 shadowOffset 值？

我想在 KonvaJs 的帮助下渲染一组 React 组件，而无需确切知道我在特定时刻绘制了哪个对象。更具体地说，这是我的代码：

我要渲染的 React 组件之一，wall.js：

在另一个组件中，我在单击按钮时创建 CWall，planmenu.js：

创建的对象被传递给应该显示它们的组件planbuilder.js：

指定的行会引发错误：

konva 没有 CWall 类型的节点

但是，如果我直接渲染一个 CWall，我会按预期将它显示在屏幕上。在我看来，这似乎是 konva 能够渲染 CWall 对象的证据：

所以我的问题是：在不知道它们的确切类型的情况下渲染对象的正确方法是什么？先感谢您。

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

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

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

这是我上面提到的 TypeScript 类：