问题标签 [konvajs]

我受到 KonvaJS 教程Modify Curves with Anchor Points的启发，制作了我自己的示例，即创建多个自定义箭头。

1. 单击 selectionBox 创建一个锚点。

2. 在创建第三个锚点时创建弯曲箭头。

3. 在第四次单击重置所有变量以绘制新的弯曲箭头。

PS 请注意，当我在浏览器控制台中写入时curveLayer.children，它会带来所有创建的弯曲箭头。

提示：我认为在创建new Shape()时所有创建的形状的值都会更改为新的。

我不知道我错过了什么。

我遵循了这篇文章中的答案；用纹理图案填充图像，它工作得很好。

有没有办法对KonvaJS做同样的事情？

因此，对于 konva.js，我有一个包含两个 Text 项的组。我做了组draggable。拖动它后，虽然我打印了文本x，y但它从未改变：

其余代码与Konva Text Demo

在KonvaJSsceneFunc()中为 any定义Shape将导致每次调用它draw()，

1. Shape.draw()
2. layer.draw()
3. stage.draw()

问题是：如何防止sceneFunc()清除上下文并将过去的绘图保留在之前的调用中？

我是 Konvasjs 的新手，也是 canvas 的新手，我一直在尝试制作一个类似于演示“海滩上的动物”的游戏在演示中捕捉到他们的特定轮廓我希望动物能够捕捉到任何轮廓，这样玩家就可以得到错误的答案，或者得到更少的分数。

对不起，如果我问的是很多东西。

我有一个 Web 应用程序可以缩放 div 以匹配屏幕大小。假设 div 的宽度为 500px，屏幕为 600px，所以通过 javascript，我为 div 设置了一个transform: scale(1.2)css 属性，它与屏幕大小相匹配。在 div 内部，我有一个也可以缩放的画布。我使用 KonvaJS 来绘制元素，我需要拖动它们。当我在计算机中运行应用程序时，拖动效果很好，但是当我在移动设备、iPad 或 iPhone 中运行时，拖动中存在偏移，我必须将手指放在元素之外才能拖动它。在这里你可以看到一个简单的方法https://jsfiddle.net/aapdl/47x75uuq/2/ 尝试在计算机中拖动每个框，然后在手机、iPad 或 iPhone 中。谢谢。

我想使用 Konvajs 执行以下任务：

1. 在画布上绘制两个矩形组。每个组包含一个矩形、文本和一个圆圈
2. 当我使用鼠标从圆圈中拖动时，它会在拖动时绘制一个箭头。
3. 当我将箭头放入另一组时，它会停止绘制并将两组边缘连接到边缘

像这样的东西：

是否有任何支持形状之间连接的本机方法？谁能给我一些例子吗？

我在制作 angular-pintura 时遇到了困难。图像源已加载，但画布的宽度、高度仍为 0。我需要调整显示（旋转到纵向/横向，调整浏览器的宽度）以使其加载图像的正确宽度和高度.

这是 angular-pintura 的 github 源代码。

这是我的代码 -

AngularJs（源图像的传递）

控制器图像查看器

HTML

有可能的？如果是怎么办？请举个例子。

我正在画布上绘制 100 个不同大小的圆圈，它们不能重叠。这些圆圈也将从右到左动画（当它们离开屏幕时循环回到画布的右边缘），并且它们也会有一些垂直的“bob”，它们也不能与任何其他圆圈重叠。

以下是我目前正在尝试的，这似乎锁定了浏览器。我遍历圆圈集合并执行一个detectOverlap()函数，将圆圈集合传递给它。

然后该detectOverlap()函数循环遍历圆圈，执行以下检查：

如果hit == 0，则循环中断，我们假设没有重叠。否则，我们随机计算一个新的 X/Y 位置并重新开始该过程。

这似乎效率低下。这样做的任何性能提示？

画布类（入口点）：这个类是“舞台”，它构建气泡对象，然后将它们添加到画布中。

气泡类： 这是代表绘制到屏幕上的数据的类。我们需要确保这些对象没有一个相互重叠。

编辑：刚刚根据@MarcB 的评论尝试了这个——但是，浏览器似乎仍然被锁定。是否造成了性能瓶颈，但 100 个项目都在运行自己的while()循环？