问题标签 [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.
konvajs - 有什么方法可以在 Konva 上导出为 SVG
在我的项目中,我使用的是 konvajs。有没有办法导出为 SVG 图像?
javascript - 文本的 `fill` 颜色被 Konva 中的 `stroke` 覆盖
我有一些 Konva Text 节点,其fill
属性设置为黑色并stroke
设置为其他颜色。在我的画布中,它看起来符合预期。当我将画布转换为 base64 图像以将其作为图像文件下载时,就会出现问题 - 在这种情况下,下载的图像如下面的屏幕截图所示:
(画布在左边,右边是下载的图像)
如您所见,笔触颜色也应用于文本自身的颜色。
我创建了一个 Codesandbox示例,其中的 Text 节点具有与我的环境中相同的属性,以下是该节点的创建方式:
如您所见,它具有相同(不正确)的外观 - 没有内联颜色。我fontSize
在 Codesandbox 中玩过,当我将其设置为非常大的值(如100
)时,文本的内联颜色变得可见。我认为这可能是一些ratio
问题,但正如我们在屏幕截图中看到的那样,画布和下载图像中的文本大小相似。
如何解决这个问题,也许还应该设置一些额外的属性?
konva
:7.1.4
react-konva
:16.12.0-0
konvajs - 是否可以模拟擦除操作而无需在 KonvaJS 中创建额外的形状?
我正在关注本指南,其中包含画笔和橡皮擦功能。该指南的代码将“globalCompositeOperation”设置为“destination-out”,并且基本上最终创建了另一条线,该线将覆盖您之前用画笔绘制的任何内容。这在某些情况下会很好用,但是如果我让我的“目标输出”线不可拖动,而“源端”线可拖动,那么如果我在画布周围拖动“源端”线,这些线将仍然完好无损,看起来不像被擦除了。
为了更好地解释我的问题,我提供了这个例子:如果我要创建两条平行线,line1(x1,y1) 和 line2(x2,y2),然后我决定画一个“destination-out”在两者中间的线,如果我要将其中一条线从“destination-out”线移开,有没有办法可以将“擦除”的部分保留在 line1 和 line2 的中间?
我确定它不是这样的,但是是否可以将线内的某些点更改为“目标输出”,而其余点是“源输出”如果没有,我们如何在没有的情况下模拟这个动作创建一个长的静态额外的“destination-out”行?
konvajs - 使用 Konva React 插入链接
我想在画布上制作可链接的形状/图像。
像这样的东西。^
我在文档中没有找到任何东西,所以也许你们中的一些人找到了解决方法并完成了这个?
konvajs - 如何将音频文件添加到 React konva?
我正在尝试制作像 office 365 PowerPoint 这样的网站。我开始使用 React konva。我被困在使用新图层将音频文件添加到 konva 舞台上。我搜索了很多但找不到解决方案。我应该能够添加音频文件并调整其音量。
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 如下
这不起作用的任何原因?
konvajs - Konva onDragMove 和 onDragEnd 不更新位置?
我正在尝试 onDragMove 手动更新元素位置。形状本身正在拖动,并且正在更新对象,但它没有被渲染?
与 onDragEnd 相同。两者都正确更新了形状数组,但它没有出现在渲染中,即使
https://codesandbox.io/s/priceless-dust-cjr6z?file=/src/App.js:0-1323
konvajs - 使用 React Konva 添加填充
我想创建与此等效的(sudo 代码):
使用 React Konva 元素。我知道如何开始,使用Group
,Rect
和Text
,但我不知道如何做 padding。希望有人能帮忙!谢谢!!
编辑:这就是我要构建的(绿色背景,文本周围有 2px 填充)。