问题标签 [react-konva]
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 KonvasJS 如何创建不能重叠的 2 层
我正在尝试创建 2 个不能重叠的图层（图像），因此它们仍然可以自由拖动，但不会相互显示。
我尝试过使用 zIndex 或空白 Rect，但无法弄清楚如何制作 2 个不能重叠的可拖动图层（非常类似于溢出：隐藏行为）
附上一个 GIF 来显示问题，每一层都不应该在分隔线后面可见。
)
javascript - How to reset position of a dragged canvas on react-konva?
I have a react konva project where you can load an image into a canvas and then move around dragging the canvas. If you load a different image, then it appears on the position where the previous image was dragged to. I am guessing if there is any way to reset this "dragged" position on the stage (the draggable component). The only thing I can think of,because I'm using react, is to re-render the entire component, which is not a problem right now, but I want to have alternatives.
The reason why I made the stage draggable instead of the image itself it's because I have a series of points that I want to be moved along with the image. Sure I can add both points and image to a group, but that will introduce some complexity that it's probably not worth it.
The code that I have now looks something like this:
reactjs - React-Konva 带钩子的免费绘图
我找到了一个使用 React-Konva 和 Free Drawing 的好例子，但我可以使用 React-Hooks。该示例非常好且简单。可以在这里找到：
我试图用 React Hooks 重现它，但我没有用，也许我错过了一些东西。实际上，我真的不明白它是如何工作的。
我做错了什么？我只是不确定！
konvajs - 如何在 Konva.js 阶段切换 y 轴以从下到上而不是从上到下开始？
我想绘制笛卡尔坐标系中的数据。原点 (0/0) 从左下角开始。在 HTML-canvas 中，原点位于左上角。如何切换 y 轴（在 react-konva 或 konva 中）？
作为示例，提供的代码从左上角向中心绘制一条线。我想通过切换y轴从左下角开始。
一切顺利，斯特凡
typescript - 导入 IReact 类型定义
我有一个包含组引用的变量，当我调用getClientRect()时，它返回“IReact”类型。
由于 IReact 不在默认类型索引中，我应该从内部类型文件中导入类型还是有更好的方法？
简化代码参考：
reactjs - react-konva dragBound 一个可缩放的舞台
我正在尝试使用 react-konva 制作一个应用程序，其中图像覆盖整个舞台，并且舞台是可拖动和可缩放的。所以我正在寻找一种将拖动绑定到图像边缘的方法。
我查看了这个演示并在我的代码中添加了一个dragBoundFunc，但是使用此代码我只能在顶部和左侧边缘拖动绑定我的舞台。
javascript - 绘制大画布时显示加载指示
我正在渲染一个包含很多元素的画布。由于元素数量多且元素形状复杂，元素不会立即显示，而是延迟显示（有时超过 10 秒）。在此期间，整个应用程序冻结并且不显示加载指示。是否有可能在画布尚未完全渲染时以某种方式显示加载指示？
reactjs - 如何以 JSON 格式保存画布阶段？
在我当前的项目中，我想用 react 和 react-konva构建类似图像编辑器的东西。
首先，我用一些道具和默认的可拖动星星渲染了一个 konva 舞台。
在下一步中，我们可以使用Imagereact-konva 为我们的舞台设置背景图像。
下一步，也是最后一步。
我们可以将 konva 阶段保存为 json 格式吗？
reactjs - react-konva 在舞台中央设置形状
我正在使用 react-konva 在舞台上绘制形状并对其进行编辑，我选择了该形状，并且该形状已设置为专注于舞台（即来到舞台的中心）。单击一个按钮，我正在更新舞台的 X、Y 和比例，但我没有在舞台的中心获得准确的形状。
请查看此演示并分享您的意见：
https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx
PS：无法从舞台上移除dragBoundFunc。
javascript - 反应康瓦。动态导入 SVG
我有一个带有 SVG 的文件夹。我需要在 Konva 的舞台上动态添加这些 SVG。我尝试使用这个组件。但它不起作用。
它仅在我进行常见导入时才有效：
所以我该怎么做？=)