问题标签 [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.

0 投票
2 回答
555 浏览

javascript - 将变压器添加到动态生成的形状?

我有添加新组的按钮,当单击非常简单的代码时,该组具有正方形,我想不需要发布。但我的问题是,如何在单击时向其添加转换器?,我已经用这个 mouseleave 和 mouseenter 函数完成了它。

它在循环中创建了名为“group”的新组,它工作正常,但是当我将它悬停在圆圈中时,变压器会出现,但是当我去变压器的盒子调整它的大小时,考虑它是 mouseleave 但这只是在圆圈中而不是在行文本中。
那么我可以为单击的元素上的活动变压器提供解决方案,或者考虑将变压器盒上的悬停作为节点上的悬停吗?谢谢

0 投票
0 回答
23 浏览

javascript - Konva.js 2D 画布 - 动态加载元素上的鼠标向下功能仅适用于最后加载的元素

我使用 Konva js 作为画布库。我将每个添加的元素单独存储在数据库中,并在用户再次进入编辑器时加载它们。为了实现这一点,我迭代了一个包含 json 格式的每个节点的对象。我面临的问题是每个函数只适用于添加的最后一个元素(即在鼠标按下时,只有最后一个 elem_id 被提醒)。非常感谢任何帮助。

0 投票
1 回答
221 浏览

javascript - 将 Caman JS 预设过滤器应用于 Konva React

通过为 layer 组件创建一个 ref,我可以访问 canvas 元素,然后我可以将其传递给 caman 函数以将预设过滤器应用于画布中的图像。这可以按预期工作,但是,当将舞台保存为图像时,不应用过滤器。如何将 Konva 舞台导出为应用了卡曼滤镜的图像。

组件编辑器.js

组件 EditorControls.js

0 投票
1 回答
157 浏览

javascript - 拖动后获取konva对象X,Y不是pointerPosition

我正在使用 konvajs 创建框,可以在通过 ajax 双击数据库后拖动并保存 x,y 坐标,代码如下:

保存并重新加载浏览器后,坐标乘以 2,因此框不会保存在应有的位置。我尝试将 x,y 划分为 2,如果我的盒子初始坐标为 0,0,它会起作用,但如果我的盒装初始坐标最初不在 0,0 中,则此 group.x() 和 group.y() 给我一个绝对值最后坐标的值

0 投票
2 回答
1015 浏览

reactjs - 选择并按住并拖动形状应水平或垂直滚动

我想要一个形状,即Rect使用鼠标选择(左按住并拖动)如果到右侧应该水平滚动,如果到底部应该在 React Konva 中垂直滚动。

如果有人使用过 trello,我正在尝试模拟使用鼠标而不是滚动条水平拖动的能力。

这是我的演示,我增加了Stage. 同时将其拖动到右侧。它应该滚动,最后可以放置。如果有人知道如何实现它,请回答。

0 投票
1 回答
547 浏览

javascript - 在 konva.js 中缩放阶段时不影响元素位置

我正在使用惊人的 konva.js 在线创建页面创建软件,所以问题是当我缩放舞台时,整个元素都在改变位置。在缩放整个舞台之前 在此处输入图像描述

缩放舞台后,行文本不在中心。

在此处输入图像描述

后面的背景只是具有相同宽度高度的舞台并具有背景图像的矩形。
这是我的缩放代码。

如果你想在这里看演示, https://mypagemaker.s3.amazonaws.com/index.html 谢谢,我保证我会给正确的答案。


因为我必须抵消它,我已经这样做了,但没有改变
0 投票
1 回答
318 浏览

reactjs - ReactJS 和 Konva 用铅笔、画笔和橡皮擦免费绘图

我想创建一个简单的应用程序,我可以在其中选择铅笔、画笔和橡皮擦。我有 Home.js 和 addLine.js。但是有一个我无法修复的错误。当我从画笔改回铅笔时,我正在用铅笔画画,但是铅笔画周围有一个边框,它采用了我之前用于画笔的颜色。错误图片示例如果重要,我使用反应颜色进行颜色选择。

和添加线

0 投票
1 回答
161 浏览

javascript - 如何获得非零旋转图像的宽度(konva)

我在 Group 元素中有一个图像。使用 Transformer 元素,用户可以更改图像宽度和旋转。之后,如何获得图像宽度?getWidth() 返回我在创建新图像时手动设置的值。getClientRect().width 返回实际宽度,它向用户显示的方式,所以看起来没问题,但是当图像旋转时它的问题就开始了。因为 getClientRect().width 返回的不是图像宽度(y),而是我们图像外接矩形的宽度(x
图像的外接矩形

我正在使用 Konva v7.0

0 投票
2 回答
1383 浏览

konvajs - React Konva - 撤销自由画线

我正在关注如何使用 react 和 konva 构建白板的本教程,它为形状提供了撤消功能,但不适用于线条,因为线条没有以相同的方式添加到图层中。如何实现免费绘制线的撤消?

编辑:

为了扩展我的问题,以下是相关代码:

我有一个公开的 repo,你可以查看(如果更容易的话,可以做一个 PR)。

https://github.com/ChristopherHButler/Sandbox-react-whiteboard

我也有一个演示,你可以在这里试用:

https://whiteboard-rho.now.sh/

这是相关代码

线路组件:

主页组件:

0 投票
0 回答
237 浏览

reactjs - 在 react-konva 中添加拖放连接器

我正在使用 react-konva 并且我试图通过从一个圆圈拖动然后将其放到另一个圆圈上来在圆圈之间添加连接线以进行连接。到目前为止,我已经尝试通过单击圆圈在它们之间创建一条线并将其作为一个组拖动。这是CodeSandBox。任何帮助表示赞赏