问题标签 [react-konva]

我正在尝试使用网格作为背景ImageKonva并用图案填充它。问题是当我加载画布时，ImageKonva 看起来完全是黑色的，并且在我添加子元素时它就会显示出来。

我创建了这个代码框，您可以在其中看到问题：https ://codesandbox.io/s/angry-river-kszh0?file=/src/App.js

注意：它并不总是可重现的，（无法弄清楚模式是什么）。有时它不会发生，我需要打开 chrome 的控制台并刷新页面才能实现。

您会看到黑框，它只会在您单击按钮后显示网格。该按钮仅添加一个子元素..从那里，图像将始终显示。此问题仅在第一次加载期间发生。

我正在尝试使用 Konva-React 在使用 fillpatternImage 的形状对象中设置图像。

我尝试了几种不同的方法，但显然我需要使用 Image 对象，而不是用于 fillPatternImage 的 Konva Image。

为什么我不能在 Konva.Shape.fillPatternImage(imageObj) 中使用 Konva.Image()？

所以我正在尝试这个......

但是得到一个错误，上面写着“TypeError：react_konva__WEBPACK_IMPORTED_MODULE_1__.Image 不是构造函数”

任何关于如何将这个或其他填充模式图像解决为 konva 形状的想法将不胜感激......

编辑。正如下面 Lavrton 所说，我从 React-Konva 导入了 Image，这导致了访问全局变量的问题。所以我Image()改为window.Image()

仍然没有加载到我的 Shape 对象中，所以为了让它完全工作，我最终这样做了..

然后使用上面的函数从我的道具映射..

}

正如lavrton所建议的，我正在使用上面的代码在 konva js 中渲染视频。有用。但是，即使我允许来自视频甚至来自服务器的跨域，当我尝试使用 stage.toDataUrl() 下载时，它也会显示以下错误。不知道发生了什么！
CORS 策略已阻止从源“url”访问“url/sample2.mp4”处的视频：请求的资源上不存在“Access-Control-Allow-Origin”标头。

帮助将不胜感激。

我正在尝试获取绘制节点的绝对位置。

Konva 文档表明可以找到一个节点：

stage尽管它可能会有所帮助，但如果我不直接与舞台交互，我就找不到访问方法。有没有办法从“外部”获取舞台或获取某个节点相对于整个视图的位置？

谢谢

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

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

假设我们在画布上绘制了一个 1000x1000 的图像，并将 konva 图像大小设置为 500x700。

是否可以在 konva 中模拟 html<img />标签object-fit属性，以便我们可以告诉图像对象以适合cover/contain模式中的图像。同样，模仿也会很有用object-position。

到目前为止，我能想到的唯一方法是使用矩形剪辑图像，并添加一些自定义逻辑来处理上述用例。我想知道是否有更好的方法？

我正在尝试使用 react-konva 制作一个 RPG 表，并且我可以使用钩子 useImage 动态地从数据库中渲染图像，它现在可以在地图中使用。

这样我们就可以工作，但所有项目都使用静态图像。我怎么能把 useImage 放在 de map 里面？

我尝试时返回此错误消息

我还需要移动每一个并旋转。我做了这样的旋转，看起来它有效！

我正在使用 React 和 Konva.js 创建一个项目，但遇到了“错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生：1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用程序中拥有多个 React 副本

”。

我正在使用的代码是：

该错误表示存在问题

但我不确定这是否有问题

我正在尝试使用 React Konva 在图像上绘制一个矩形，并获取其 4 个角的坐标。我已经相当准确地计算并返回了4个角的坐标，但问题是我仍然无法实现dragBoundFunc（拖动时在画布中绑定矩形）和boundBoxFunc（在变换时绑定画布中的矩形（旋转， 规模））。

我能想到的一种解决方案是获取 4 个角的最小和最大 X、Y 坐标，然后如果画布的最小 < 0 和最大 > 尺寸则返回 false。但是我还没有成功，你可以在这里查看我的沙箱。谢谢你的帮助。