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

javascript - Konvajs 在移动绘图线时绘制第一个点


我有以下问题:我正在使用 konvajs 构建一个画布,您可以在其中绘制例如线条。另外,您应该能够移动这些线。直到这里没有问题,为线条赋予可拖动属性一切正常。但是当我移动线条时,我仍然会在开始时画一个点。移动线时如何防止第一个点绘制?

我使用简单的绘图演示开始,所以我有一个绘图功能的 mousedown 事件

0 投票
1 回答
480 浏览

konvajs - KonvaJS - KonvaText 周围的文本边界框,没有顶部,底部空间

在 KonvaText 周围创建边界框的最佳方法是什么,顶部和底部之间没有任何填充或空格?

蓝色框是当前的边界框,要求像绿线一样去掉顶部和底部的空间。所以最终的结果应该是一个类似于现有的边界框,但没有像绿线那样的顶部、底部空间。

非常感谢有人可以提供帮助!

在此处输入图像描述

0 投票
0 回答
23 浏览

javascript - 无法使用 konva 重新调整视频窗口的大小

我将视频包含在网页中,我不想使用视频控制循环。所以我写了普通的js来暂停,播放和停止。每当我尝试播放视频时,视频窗口超出了屏幕大小,无法重新调整大小。我尝试使用 css 调整大小,但它不起作用。这是脚本

我使用的按钮在这里

0 投票
1 回答
32 浏览

typescript - 导入 IReact 类型定义

我有一个包含组引用的变量,当我调用getClientRect()时,它返回“IReact”类型。

由于 IReact 不在默认类型索引中,我应该从内部类型文件中导入类型还是有更好的方法?

简化代码参考:

0 投票
1 回答
152 浏览

konvajs - 在 konvajs 中绘制框时使用 hitbox 选择多个对象

我目前正在尝试选择多个对象(特别是线条)并通过绘制一个框将它们添加到组/变压器中。为此,我遵循了这个非常有用的stackoverflow 问题

实施后,我对结果并不满意,因为即使我没有通过形状,每次绘制框时我都需要检查整个形状列表。

在试图找到解决这个问题的方法时,我认为可能有一种方法可以让一条线知道它与正在绘制的框相撞。但是,我没有幸运地找到与我试图重现的东西类似的东西。有没有一个例子或方法让我绘制一个框以在它们与框碰撞时选择多个对象?

0 投票
1 回答
708 浏览

reactjs - 如何以 JSON 格式保存画布阶段?

在我当前的项目中,我想用 react 和 react-konva构建类似图像编辑器的东西。

首先,我用一些道具和默认的可拖动星星渲染了一个 konva 舞台。

在下一步中,我们可以使用Imagereact-konva 为我们的舞台设置背景图像。

下一步,也是最后一步。

我们可以将 konva 阶段保存为 json 格式吗?

0 投票
1 回答
498 浏览

konvajs - 通过从 Konvajs 的空白区域拖动来拖动变压器的最佳方法是什么?

我目前正在按照本指南在舞台中选择形状并将它们放入 Transformer 中。如果可能的话,我想拖动整个 Transformer 及其所有内容,而不触及里面的任何形状。

例如,我有两条相距很远的线。它们都是 Transformer 内的节点,只要我单击这两条线中的一条,就可以拖动它们。但是,如果我试图从 Transformer 内的任何空白区域拖动,则不会发生任何事情(或者变压器会重置,具体取决于代码)。

我正在考虑向 Transformer 添加一个透明的 Rect(这个 Rect 将始终具有与 Transformer 相同的大小),然后在 Transformer 中添加我想要的任何其他形状。由于 Rect 和 Transformer 的大小相同,我可以轻松地将整个 Transformer 从我的其他形状不位于的任何“空白区域”中拖动出来。

我不确定这是否是正确/有效的方法。我应该如何解决这个问题以获得最佳结果?

0 投票
1 回答
317 浏览

reactjs - react-konva - 同时运行精灵动画和过滤器

总而言之,我不能同时为 Konva 精灵设置动画并应用 Konva 过滤器。

我正在使用 react-konva 绘制一个复杂的舞台,其中部分包含使用 Sprite 组件动画的动画图像。为了启动动画,我一直等到节点在浏览器中绘制出来,有点“hack”(setTimeout),然后在每个节点上调用 shape.start() 来启动它们。

我还为这些图像添加了颜色叠加层,具体取决于我在渲染之前输入 Sprite 组件的属性。我为此使用了 Konva RGBA 过滤器——它并不完美,但可以完成工作。为了启动和绘制过滤器,Konva 需要重新缓存图像,因此在 render() 中绘制完节点后,我使用了 cache 和 batchDraw 函数。

我在 componentDidMount 和 componentDidUpdate 中都有所有这些。

我遇到的问题是动画和过滤器单独工作,但永远不会一起工作,无论时间延迟或它们的顺序如何。结合起来,只有过滤器才能工作。另一方面,如果我只运行动画脚本,动画就会启动并运行良好。但是在一起,动画就没有开始。我想我只是不太了解这里的生命周期,但也许有人可以帮助我指出正确的方向?

0 投票
1 回答
574 浏览

javascript - React Konva 中正多边形的捕捉问题

这是自定义形状的边界框 三边正多边形的边界框 这里三角形的边界框没有正确连接到三角形的末端,所有正多边形也是如此。所以当我们尝试捕捉形状时,形状没有正确捕捉到正多边形的末端针对上述问题。这是链接:- https://codesandbox.io/s/react-konva-basic-demo-btuum?file=/index.js

0 投票
0 回答
318 浏览

javascript - 单击时将变压器添加到节点 - KonvaJs

我正在创建一个应用程序,并且在单击时将变压器添加到节点时遇到了一些问题,我已经创建了一个 .on 函数并通过 evt.target 获取节点实例,但不知道如何将变压器附加到节点,我有一个转折有动态生成的正方形,我想将一个变压器附加到舞台的一层。与许多软件一样,您选择元素以调整其大小。