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

0 投票
1 回答
144 浏览

konvajs - Konvajs 中是否提供 Sharpness 过滤器,如果有如何使用它?

https://konvajs.org/api/Konva.Filters.html

在此链接中,锐度过滤器不可用

0 投票
1 回答
391 浏览

konvajs - 有什么方法可以在 Konva 上导出为 SVG


在我的项目中,我使用的是 konvajs。有没有办法导出为 SVG 图像?

0 投票
1 回答
340 浏览

javascript - 文本的 `fill` 颜色被 Konva 中的 `stroke` 覆盖

我有一些 Konva Text 节点,其fill属性设置为黑色并stroke设置为其他颜色。在我的画布中,它看起来符合预期。当我将画布转换为 base64 图像以将其作为图像文件下载时,就会出现问题 - 在这种情况下,下载的图像如下面的屏幕截图所示:

(画布在左边,右边是下载的图像)

文本

如您所见,笔触颜色也应用于文本自身的颜色。

我创建了一个 Codesandbox示例,其中的 Text 节点具有与我的环境中相同的属性,以下是该节点的创建方式:

如您所见,它具有相同(不正确)的外观 - 没有内联颜色。我fontSize在 Codesandbox 中玩过,当我将其设置为非常大的值(如100)时,文本的内联颜色变得可见。我认为这可能是一些ratio问题,但正如我们在屏幕截图中看到的那样,画布和下载图像中的文本大小相似。

如何解决这个问题,也许还应该设置一些额外的属性?

konva7.1.4

react-konva16.12.0-0

0 投票
0 回答
75 浏览

konvajs - 是否可以模拟擦除操作而无需在 KonvaJS 中创建额外的形状?

我正在关注本指南,其中包含画笔和橡皮擦功能。该指南的代码将“globalCompositeOperation”设置为“destination-out”,并且基本上最终创建了另一条线,该线将覆盖您之前用画笔绘制的任何内容。这在某些情况下会很好用,但是如果我让我的“目标输出”线不可拖动,而“源端”线可拖动,那么如果我在画布周围拖动“源端”线,这些线将仍然完好无损,看起来不像被擦除了。

为了更好地解释我的问题,我提供了这个例子:如果我要创建两条平行线,line1(x1,y1) 和 line2(x2,y2),然后我决定画一个“destination-out”在两者中间的线,如果我要将其中一条线从“destination-out”线移开,有没有办法可以将“擦除”的部分保留在 line1 和 line2 的中间?

我确定它不是这样的,但是是否可以将线内的某些点更改为“目标输出”,而其余点是“源输出”如果没有,我们如何在没有的情况下模拟这个动作创建一个长的静态额外的“destination-out”行?

0 投票
1 回答
104 浏览

konvajs - 使用 Konva React 插入链接

我想在画布上制作可链接的形状/图像。

像这样的东西。^

我在文档中没有找到任何东西,所以也许你们中的一些人找到了解决方法并完成了这个?

0 投票
0 回答
71 浏览

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

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

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

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

0 投票
1 回答
110 浏览

konvajs - 如何将音频文件添加到 React konva?

我正在尝试制作像 office 365 PowerPoint 这样的网站。我开始使用 React konva。我被困在使用新图层将音频文件添加到 konva 舞台上。我搜索了很多但找不到解决方案。我应该能够添加音频文件并调整其音量。

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 投票
1 回答
255 浏览

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

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

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

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

0 投票
1 回答
430 浏览

konvajs - 使用 React Konva 添加填充

我想创建与此等效的(sudo 代码):

使用 React Konva 元素。我知道如何开始,使用Group,RectText但我不知道如何做 padding。希望有人能帮忙!谢谢!!

编辑:这就是我要构建的(绿色背景,文本周围有 2px 填充)。