问题标签 [konva]

我创建了一个负责在网页屏幕上绘制图像的角度组件，我创建了两个 konva 层，baseLayer 和assetLayer。BaseLayer 将在屏幕上绘制基础图像，而assetLayer 将在基础图像上绘制另一组图像。

每个基本图像都有自己数量的资产可以绘制在基本图像上。但是只有第一个基本图像正在绘制资产，然后如果我更改下一张幻灯片，它不会更改基本图像上的资产。我尝试过的东西在 ng2-konva http://rafaelescala.com/ng2-konva的文档中给出/ 图书馆。但仍然无法正常工作。

我面临的问题是更换幻灯片时assetLayer 不刷新

我正在分享我的 stackblitz url 以查看工作示例。

https://stackblitz.com/edit/ng2konvademo?devtoolsheight=33&embed=1&file=src/app/components/views/floor-view/floor-view.component.ts

在控制台中查看我们在每张幻灯片上获得的资产数量，这些应该是基础图像上的随机数。

我已经用 konva 创建了砖石网格，这里的 React 是我已经走了多远的例子： https ://codesandbox.io/s/masonry-grid-image-konva-react-cp73d

React 中关于 Konva Image 的文档https://konvajs.org/docs/react/Images.html

我需要用同一张卡片创建一个无限网格，就像这张图片一样，但我无法用背景图片或填充图案填充矩形。我不确定如何创建 img 对象来填充矩形或如何在无限网格中使用该图像重复相同的图像......它在代码和框中的 svg 这是我当前的代码：

对此的任何帮助将不胜感激

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

我正在按照https://konvajs.org/docs/sandbox/Gestures.html上给出的教程在我的应用程序中包含旋转手势。但是在我的应用程序中，我还附加了“tap”事件侦听器，因此每当我尝试使用手势旋转形状时，也会发出“tap”事件，并且在一次点击形状时会发出“tap”事件两次。有什么方法可以防止这种情况发生，通过两指旋转手势进行旋转时，不应发出“点击”事件？有什么方法可以在 konvajs 中使用 stopImmediatePropagation() 吗？

https://jsfiddle.net/pudio/z68nc5p3/2/

我正在寻找一种方法来从 Konva 的 'dblclick' 事件中获取 Konva 标签（以下代码中的“Hello World！”）的 ID（以下代码中的 123）。

我可以从 Konva 的 'dblclick' 和 'dragmove' 事件中获取 Konva 图像的 ID（下面的代码中的 321）（下面的代码中的 Konva 的 LOGO “K”）。我还可以从“dragmove”事件中获取 Konva 标签（“Hello World！”）的 ID（下面代码中的 123）；但是我无法从 Konva 的 'dblclick' 事件中获取 Konva 标签（“Hello World！”）的 ID（以下代码中的 123）。

我的代码：

我想减慢可拖动 HTML 对象的速度，使其成为一种懒惰的拖动。

有没有办法用原生 HTML/CSS 实现这个功能？

或者可能有一些现有的 JS 库具有这种能力？

找不到任何具有如此简单功能的库..

我有一个圆圈，我想在顶部画一些弯曲的文字。目前我正在生成圆圈和文本路径，但是文本面向圆圈的外部并且在读者看来是颠倒的。如何将文本翻转到正确的方向？

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

（画布在左边，右边是下载的图像）

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

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

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

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

konva：7.1.4

react-konva：16.12.0-0

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

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

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

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

像这样的东西。^

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