问题标签 [konvajs-reactjs]
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.
typescript - 导入 IReact 类型定义
我有一个包含组引用的变量,当我调用getClientRect()时,它返回“IReact”类型。
由于 IReact 不在默认类型索引中,我应该从内部类型文件中导入类型还是有更好的方法?
简化代码参考:
reactjs - 如何根据设备大小/分辨率制作 Konva-React 响应式(缩放)画布?
我正在创建一个类似视频游戏的应用程序,为此我使用Konva React来处理我的画布,这个应用程序可以从计算机和/或移动设备访问,我希望它像在这个例子中,当它仍然被调用时,我通过这个答案KineticJS
找到了。
我对 React 和 Konva 还很陌生,所以我可能不知道很多事情,而这种知识的缺乏可能是这个问题背后的原因。
所以,我尝试在 React 中复制代码,但这仍然没有调整大小,而是添加滚动条来查看不是我想要的内容。
从 2 年前开始,我也尝试了这个答案的解决方案,这与我在这里的示例相同。
如this answeruseStrictMode(true)
所示启用也无济于事。
调整大小后:
应该发生的是绿色矩形应该根据窗口大小缩小,就像我在上面发布的第二个链接中一样:
konvajs - 在 konvajs 中绘制框时使用 hitbox 选择多个对象
我目前正在尝试选择多个对象(特别是线条)并通过绘制一个框将它们添加到组/变压器中。为此,我遵循了这个非常有用的stackoverflow 问题。
实施后,我对结果并不满意,因为即使我没有通过形状,每次绘制框时我都需要检查整个形状列表。
在试图找到解决这个问题的方法时,我认为可能有一种方法可以让一条线知道它与正在绘制的框相撞。但是,我没有幸运地找到与我试图重现的东西类似的东西。有没有一个例子或方法让我绘制一个框以在它们与框碰撞时选择多个对象?
konvajs - 通过从 Konvajs 的空白区域拖动来拖动变压器的最佳方法是什么?
我目前正在按照本指南在舞台中选择形状并将它们放入 Transformer 中。如果可能的话,我想拖动整个 Transformer 及其所有内容,而不触及里面的任何形状。
例如,我有两条相距很远的线。它们都是 Transformer 内的节点,只要我单击这两条线中的一条,就可以拖动它们。但是,如果我试图从 Transformer 内的任何空白区域拖动,则不会发生任何事情(或者变压器会重置,具体取决于代码)。
我正在考虑向 Transformer 添加一个透明的 Rect(这个 Rect 将始终具有与 Transformer 相同的大小),然后在 Transformer 中添加我想要的任何其他形状。由于 Rect 和 Transformer 的大小相同,我可以轻松地将整个 Transformer 从我的其他形状不位于的任何“空白区域”中拖动出来。
我不确定这是否是正确/有效的方法。我应该如何解决这个问题以获得最佳结果?
javascript - 反应康瓦。动态导入 SVG
我有一个带有 SVG 的文件夹。我需要在 Konva 的舞台上动态添加这些 SVG。我尝试使用这个组件。但它不起作用。
它仅在我进行常见导入时才有效:
所以我该怎么做?=)
konvajs - Konva.js 在 Rect 元素周围挥动笔划
如果可以将Rect
元素笔划(边框)更改为波浪样式,如下图所示。我会让用户Rect
通过鼠标移动来绘制。
我知道如何将边框更改为Dashed
但波浪样式怎么样?
这是Rect
Konva.js 和 API 文档的示例代码https://konvajs.org/api/Konva.Rect.html
reactjs - ReactJS 和 Konva 用铅笔、画笔和橡皮擦免费绘图
我想创建一个简单的应用程序,我可以在其中选择铅笔、画笔和橡皮擦。我有 Home.js 和 addLine.js。但是有一个我无法修复的错误。当我从画笔改回铅笔时,我正在用铅笔画画,但是铅笔画周围有一个边框,它采用了我之前用于画笔的颜色。错误图片示例如果重要,我使用反应颜色进行颜色选择。
和添加线
konvajs - React Konva - 撤销自由画线
我正在关注如何使用 react 和 konva 构建白板的本教程,它为形状提供了撤消功能,但不适用于线条,因为线条没有以相同的方式添加到图层中。如何实现免费绘制线的撤消?
编辑:
为了扩展我的问题,以下是相关代码:
我有一个公开的 repo,你可以查看(如果更容易的话,可以做一个 PR)。
https://github.com/ChristopherHButler/Sandbox-react-whiteboard
我也有一个演示,你可以在这里试用:
https://whiteboard-rho.now.sh/
这是相关代码
线路组件:
主页组件:
reactjs - 在 react-konva 中添加拖放连接器
我正在使用 react-konva 并且我试图通过从一个圆圈拖动然后将其放到另一个圆圈上来在圆圈之间添加连接线以进行连接。到目前为止,我已经尝试通过单击圆圈在它们之间创建一条线并将其作为一个组拖动。这是CodeSandBox。任何帮助表示赞赏
reactjs - KonvaJS,可能有一组可拖动的图像吗?
我正在使用react-konva,我需要能够一次拖动多个图像(不使用 mutliselect)。Konva 似乎通过使用组或容器来处理这个问题。
我查看了 TypeScript 文件,然后:
看起来 theImage
是一个实例,Shape
因此应该可以放在 a 中Group
,但我就是无法让它工作。
我试着做:
我尝试通过 vanilla API 查找示例,但找不到任何内容。它表明Group
应该能够包含Shape
api
组构造函数。组用于包含形状或其他组。
我想知道是否有人对利用提供的 Konva 代码来完成创建可拖动的图像组或我没有考虑的替代方法有任何建议。