问题标签 [konva]

在我的 React 应用程序中，我想创建不是通常form用于创建路段的。

例如，我有这个 png 格式的方案。

但我想创建一个交互式编辑器，可以在其中创建方案，将它们保存到服务器然后重用。

我会尝试模拟一种情况

用户想要创建一个新的路段。道路有六车道。（上图）

1. 用户应该可以自己绘制此图（所有线条、圆圈、图像等）

2. 将此数据保存到服务器

然后用户想要接收关于一个特殊车道的数据。（此功能在另一个组件中取出）

因此，用户打开新组件，他可以通过他将选择的一些车道获得统计信息

1. 从服务器获取保存的方案

2. 渲染此方案并为每个车道集成复选框

选择通道后，用户将信息发送到服务器，它希望在哪个通道上接收摘要（统计信息）

我发现 Konva 框架https://konvajs.org/或 p5.js ( https://p5js.org/ )，但在我看来这种方法非常麻烦

我可以用什么来构建这样的东西？

我正在尝试根据鼠标事件生成绘图，但我注意到一些有趣的渲染行为，我无法解释为什么会这样。这是显示此示例的 jsbin：https ://jsbin.com/qiqetoy/edit?html,output

这是该图的有趣部分：

您可以在上面看到在曲线上绘制了几条锐利的边缘/线条。我无法解释这是怎么发生的。你也可以清楚的看到它不是 5px 宽的（笔画宽度设置为 5px）。

对 canvas/konvajs 绘图有更多经验的人可以帮助解释这里发生了什么，我应该怎么做才能摆脱这种行为？

谢谢，克

基于Konva 网站上的URLImage 示例，我创建了一个类来使用事件侦听器将图像加载到我的画布中。

我有一个完全由透明背景上的白色像素组成的 PNG。我想将白色像素着色为纯色（例如，红色、紫色或青色）。我查看了过滤器示例，但我无法理解这些特定部分是如何组合在一起的。

我如何使用 react-konva.Image （例如，使用<Image filters={[...]} image={...} ref={node => {this.imageNode = node;} />）来做到这一点？

这是我上面提到的 TypeScript 类：

我想用这样的圆角绘制折线：

将点设置为与Konva library一致存在问题。

我正在尝试使用bezier属性来模拟没有张力的光滑角落，正如文档所说：

if no tension is provided but bezier=true, we draw the line as a bezier using the passed points

但如果我设置bezier: true，它只接收 3 对点 [x,y] 并忽略点数组的其余部分，然后只切割折线。

代码打开示例

我不知道如何在没有bezier选项的情况下绘制带有圆角的直线折线tension。

有没有办法用 Konva 或其他 JS Canvas 库来实现这样的图形？

所以我正在使用 KonvaJS 和 KonvaReact 构建一个 UML 绘图工具，为此我需要将形状与线条连接起来。我在网站上看到了有关连接对象的教程https://konvajs.org/docs/sandbox/Connected_Objects.html。

他们使用一个函数get_connecter_points，根据圆上的弧度计算直线的位置。

我试图想出一个类似的功能，但无法想出一个好的解决方案或找到一个好的例子。正如您在图像中看到的，我刚刚在函数中返回了 from x 和 y 以及 to x 和 y，因此这些线条将放置在每个正方形的左上角。

该函数的目标应该是将线条放在正方形边的中间和正方形的正确边上。因此，当 to 方块放在下方时，它应该出现在底部。

因此，如果有人有解决方案，我们将不胜感激。

我有一个 Konva 层，上面有一些生物 Image 对象。我想在这些对象上存储自定义数据值（hp 和时间），因此当我序列化容器时，这些数据值将出现在 json 中。我怎样才能做到这一点？

hp:creat.hp，
时间：creat.time

我尝试初始化第三方库在 React 钩子中我正在使用 useEffect 但我总是得到null 我尝试使用自定义钩子但我得到相同的结果（null）

任何想法？

这是我的代码https://stackblitz.com/edit/react-rg9uov

谢谢

Vue 新手——在探索中学习。

我正在尝试使用自定义对象作为 v-for 情况的数据源。到目前为止，还不行——我承认我不确定如何在 Vue 组件中按名称访问数据。

main.js

可能未直接连接到数据提供者的自定义对象是 roomBuilder。

然后，在我想引用这个对象的组件中，我有这个代码：

这两个 POJO 是：

RoomBuilder.js

和

房间.js

谢谢，对我放轻松。我通常是服务器端的人！我显然接线有误...尝试过

v-for="这个房间。$data.roomBuilder.getRooms()"

v-for="roomBuilder.getRooms() 中的房间"

等等

显然有一些我不明白的魔法正在发生！

谢谢！

抱歉，我是编码新手，并且在我认为非常基本的事情上苦苦挣扎。

我想通过多个 konva 线对象绘制一个形状。一旦我创建了一条线，而不是手动计算下一行应该从哪里开始，我认为必须有一种方法来获取最后一行的结束位置并将其设置为新行的起点。

正如你在下面看到的。我一直在手动计算起始值。

使用 konva.js，您可以在画布上创建视频组件。在这里您可以看到文档中的示例 ( https://konvajs.org/docs/sandbox/Video_On_Canvas.html )。

现在我正在使用 vue-konva 并且没有组件可以在画布上创建视频。你需要用 v-image 组件来做，但我不能让它工作。vue-konva可以吗？