问题标签 [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 投票
0 回答
71 浏览

konvajs - 如何在 KonvaJs 中获得碰撞的三个形状的交集并删除未碰撞的部分?

如果给我 3 个圆圈并且它们被定位为原色圆圈(3 个圆圈相互交叉),是否有一个功能可以帮助我删除不与任何东西碰撞的部分并只保留相交的部分?

另一个例子可以是绘制三条线,使其形成一个三角形。通过删除没有碰撞的部分,我们最终会得到 3 个点(至少在视觉上,不确定我最终是总共得到 3 个还是从堆叠中得到 6 个),它们是前一个三角形的边缘。

我一直在检查ClipFuncHitFunc,但我不确定我是否正在通过正确/最佳路径来解决我的问题。

0 投票
1 回答
502 浏览

javascript - 旋转一组包含文本的形状,同时保持文本居中和水平

这可能只是数学。

我正在使用 Konva 动态生成形状,并将其存储为标签。所以有一个标签,其中包含一个 textElement 和一个矩形。我想确保该矩形中的文本始终a)水平和垂直居中,b)朝上。

所以一个矩形可以有任何旋转,但我总是希望文本居中并朝上。

创建代码;宽度、高度、旋转、x 和 y 都有从数据库中提取的值。

问题是,如果旋转到位,文本会偏离中心,如下图所示: 偏离中心的文字

在某些情况下,我会手动更正 - 例如,如果旋转 = 45 度:

但这不是永久的解决办法。我希望文本的 x 和 y 坐标位于形状本身的中心点。

我尝试了几种方法(例如对标签本身应用旋转,然后对文本应用负旋转值)

0 投票
1 回答
230 浏览

jestjs - 用 Jest 设置 Konva

我正在尝试使用 Konva 设置 Jest,但收到此错误:

我已经在我的 TS 文件中导入了 Konva,import Konva from 'konva'当我将其更改为import * as Konva from 'konva'

是否有解决方法来修复 Jest 上的此模块分辨率?

0 投票
1 回答
140 浏览

konvajs - 当循环使用 konvajs 事件使用手绘完成时?

我在汽车图像上制作了画布,并使用 KonvaJs 实现了自由手绘。

我想要的是-:

当徒手完成闭合循环(任何形状)时,在闭合形状内填充颜色。

谁能告诉我闭环制作时是否有任何事件

任何帮助将不胜感激

提前致谢

0 投票
1 回答
339 浏览

reactjs - 在 konva 中更改裁剪矩形之外的不透明度

我正在尝试使用 React 和 konva 构建图像裁剪工具。我想更改裁剪矩形之外的不透明度以模糊图像的其余部分。

到目前为止,我尝试为矩形和图像设置不同的不透明度,但失败了。我查了一下,没有直接的方法可以做到这一点

这是我在这个答案的帮助下适应的裁剪功能

上述代码的演示

0 投票
1 回答
43 浏览

konva - 如何在 KonvaJS 中将节点修改为导入的 JSON

我已经通过从 json 文件导入节点成功地导入了节点。但是,它不起作用,因为我尝试修改(转换,删除)我带来的节点。我应该怎么办?

这是代码。谢谢!

密码笔

0 投票
1 回答
146 浏览

vue.js - 通过 konva 绘制形状以显示在画布中

我想在 vue.js 中使用 konva 来绘制要在画布中显示的形状,所以我有一些矩形存储在 rectangles 数组中,需要绘制,但没有绘制任何东西。

0 投票
0 回答
169 浏览

reactjs - React-konva:node_modules/react-konva/lib/ReactKonva.j 不导出“Stage”

我的目标是将以下代码引入到我现有的下面的 React Web 应用程序中。 https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js:0-3896

我首先通过创建一个包含以下代码的简单反应应用程序来说明它运行良好:

然后我想将上面的代码包含到我现有的 react web 应用程序中。于是我把上面的代码做成了一个组件,开始调用如下图(即它的<RoiComponent/>

完成此操作后,当我构建应用程序时,我不断收到此错误

我的 package.json 如下

这不起作用的任何原因?

0 投票
0 回答
73 浏览

konvajs - 在 Konva 层内绘制矩形,由均匀分布的区域限定

我正在使用 Konva.js 来渲染一些彩色盒子。

我有一个舞台,该舞台内有一些设定的大小和区域,由点(例如矩形,但它们可以是任何多边形)限制。

然后我需要在这个区域内添加一些较小的矩形,这样它们看起来不错并且分布均匀。

例如

上面的结果是这样的

截屏

我想要的是那些只填充我的多边形边界内的自由区域的盒子。

我读了一大堆关于 Delauney 三角剖分、Voronoi 图和正态分布排序以实现它,但遗憾的是我想出了 zilch 的实用方法。

https://jsfiddle.net/x4aksz1y/2/

0 投票
1 回答
255 浏览

konvajs - Konva onDragMove 和 onDragEnd 不更新位置?

我正在尝试 onDragMove 手动更新元素位置。形状本身正在拖动,并且正在更新对象,但它没有被渲染?

与 onDragEnd 相同。两者都正确更新了形状数组,但它没有出现在渲染中,即使

https://codesandbox.io/s/priceless-dust-cjr6z?file=/src/App.js:0-1323