问题标签 [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 回答
55 浏览

reactjs - 使用 React-Konva 删除节点上的功能错误

所以我用我最新的问题更新了我以前的 react-konva 示例代码:https://codesandbox.io/s/react-konva-drag-and-drop-image-with-delete-button-on-tranform-6977j?文件=/src/Draganddrop.js

我正在尝试将删除按钮添加到选择时可见的每个图像,单击时会删除从舞台和图像数组中选择的图像,我最终将使用它来保存和加载状态。我设法添加了红色圆圈并将其用作删除按钮,但我似乎无法将其移动到每个图像的右上角或在红色圆圈的中心添加一个白色十字。

删除函数本身会从图像数组中删除选定的图像并从舞台上删除节点,但有时似乎会从舞台上删除多个图像,即使它只从数组中删除选定的图像。我需要它来只删除从舞台上选择的那个,我目前正在使用 UseRef 来识别它,我做错了吗有没有更好的方法来确保它只删除选定的图像?

0 投票
1 回答
225 浏览

javascript - 如何在 React Konvajs 中设置过滤器?

我有 SVG 图像,我需要更改它们的颜色。如果我使用通常的 HTML 元素,我会使用将十六进制转换为 CSS 过滤器的函数。例如,“#b5b5b5”与“反转(51%)棕褐色(81%)饱和(1433%)色调旋转(195deg)亮度(100%)对比度(93%)”相同。所以如果我的 SVG 是黑色的,它就会变成蓝色。

在此处输入图像描述

我怎样才能对 Konva 做同样的事情?我试图像他们在这里那样应用过滤器,但我得到了错误的颜色。你能给我看一个反应和我上面写的过滤器的工作例子吗?

0 投票
1 回答
48 浏览

reactjs - 如何在 React Konva 中为图像组件添加样式

我是 react konva 的完整初学者。我正在使用带有 use-image 钩子的 Image 组件来显示图片,但我希望图片是圆形的。我尝试了不同的 css 方法,但似乎没有任何效果。任何帮助深表感谢

0 投票
2 回答
102 浏览

reactjs - React Konva 旋转/旋转动画

嘿,我是新来的反应康瓦。我正在创建一个项目,我希望一个矩形围绕一个对象旋转。任何人都可以告诉我如何实现这一目标。任何帮助深表感谢

0 投票
1 回答
93 浏览

reactjs - 如何在 react konva 中创建这个自定义形状

嗨,我是新来的反应 konva 并试图为我的项目制作自定义形状我想创建黄色元素,它基本上是一个带有弯曲侧面的梯形,应该适合红色环内,如图所示。任何帮助深表感谢。 在此处输入图像描述

0 投票
1 回答
55 浏览

reactjs - 对 konva 动画做出反应以跟随路径

嘿,我是反应 konva 的新手,想创建一个动画,其中一个矩形遵循用户定义的点路径。第一个用户通过单击屏幕并初始化目标点来定义路径,然后矩形应相应地跟随路径

这是我的代码,但它似乎没有按预期工作。非常感谢任何帮助。PS如果您有任何疑问请让我知道

0 投票
0 回答
37 浏览

reactjs - konva react.js 文本可拖动无法正常工作

我正在以 react-bootstrap 模式创建 Konva Stage。在使用来自 Konva 库的文本时,它不会从我设置的真实位置拖动,而是随机拖动位置随字体大小而变化。这是工作演示的链接。 https://nimb.ws/MPeyZj

这是我的文本列表:{ x: 100, y: 100, text: topTextForMeme, fontSize: topFontSizeForMeme, selected: true, fontFamily: "Arial", fill: topColorForMeme, strokeWidth: 1.5, stroke: "#000000", },

0 投票
1 回答
107 浏览

reactjs - 如何向 React Konva Video Stage 添加控件

嘿,所以我想播放一段视频作为我的 konva 舞台。我使用了沙盒中的一个示例,但我不知道如何向其中添加视频播放器控件。有人可以帮忙谢谢

0 投票
1 回答
182 浏览

canvas - react-konva 使用鼠标单击自由手区域选择(直线)

我想使用react-konva在画布上实现自由区域选择。有人有解决方案或建议吗?
请参阅屏幕截图以更好地理解。
谢谢你 !!!

我试过这个,https://codesandbox.io/s/dry-flower-b5eof-b5eof

在画布上使用徒手选择区域选择

0 投票
1 回答
20 浏览

react-konva - 用两根手指在触摸板上 React Konva 移动屏幕

我正在寻找正确的事件以在触摸板上用两根手指在画布上导航。我正在使用 React Konva.js,我在网站上找到了一个很好的例子https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html 我不想用两个手指放大或缩小的问题但是导航。有没有人有相关的例子?