问题标签 [jcanvas]

我正在尝试使用 JCanvas 中的鼠标事件在画布上绘制一条线和矩形。Hre 是我的代码

但我没有得到预期的输出。你能告诉我我在上面的代码中犯了什么错误吗？提前致谢。

在我的应用程序中，我在画布上绘制图像，然后为标签添加圆圈和文本。我将额外的绘图代码移至 drawImage 的 load 方法，并发现将鼠标移到画布上时会重复调用相同的代码。我尝试有选择地注释掉不同的块以查明问题，但并没有真正缩小范围。

该块是绘制图像的主要代码。许多变量是不言自明的。使用的不同 ID 用于数据库标识。我注意到将鼠标移到画布上时会重复打印“回调”。

是否有可能在 jCanvas 中用图片而不是颜色填充矩形？

我会像在 css 中一样重复矩形中的图片，例如：

Start with a 2d grid on an HTML5 canvas. The user creates lines by plotting points - up to 5 lines.

Next, the user can select another arbitrary point on the grid, and the region is highlighted. I need to take that point and define a polygon to fill the region described by the lines created by the user.

So my thought is, I need to detect the lines and canvas edges that surround the arbitrary point, and then draw a polygon.

Here is an image to help understand what I mean (where the system is functioning with two lines):

All the state is managed by using jCanvas and custom Javascript.

Thanks!

Wow... I just woke up and found these incredible answers. Love SO. Thanks guys.

现在我的整个项目太大了，无法复制和粘贴，但这里是我现在正在做的事情的基本分类：

到目前为止我看过的东西：

• 加载时间（有点相关，当页面加载速度更快时，它似乎更频繁地中断）
• 加载顺序（似乎不相关）
• 通过预先将其强制为页面图像来预加载图像（不修复它）
• 使用 Image() 预加载它并将图像路径传递给 Image().src （也不修复它）
• 将 Image() 作为 data.source 而不是字符串路径传递（可能有一点帮助）
• 事先初始化 JCanvas（似乎不存在此功能）
• 尽早或尽可能晚地创建模式（似乎改变了频率，但不是很多）

它似乎有自己的想法，我无法弄清楚我做错了什么。任何人都知道我做错了什么？

-编辑1-

现在通过 Jcanvas 源进行调试，我认为它与上下文有关。有什么方法可以让我预加载画布上下文吗？

-编辑2-

忘记我所说的关于上下文的一切，我想我明白了。

img.onload 事件应该在图像加载后直接发生，但它似乎永远不会发生。

当我将普通对象或图层添加到画布（使用jCanvas）时，我可以使用该clearCanvas()功能清除画布。

但是当我使我的图层可拖动时，该clearCanvas()功能似乎不起作用。当我单击按钮时，它确实清除了画布，但是一旦鼠标再次悬停在画布上，删除的内容就会再次添加。我在这里做错了什么？

JSFiddle 演示

考虑到这种基本情况，人们可能期望图层的坐标会被更新......但他们不会。

相反，有可能记住起点，计算鼠标偏移量，然后更新坐标，就像在这个测试中一样，但是......效果非常极端。预期：点 x1,y1 是静态的结果：点 x1,y1 移动得非常快

如果将坐标设置为常数，则拖动保持不变。这里的主要问题是拖动动作适用于整个图层。

修复：在拖动结束时应用修改，就像在这个片段中一样。但它相对丑陋。任何人都有更好的方法

• 开始运行线点的实际坐标
• 在其他人移动时设法保持线的一点静止

期待您的建议，

我想知道我们是否可以添加另一个动态事件，例如点击、触摸启动等。

前任 ：

我正在尝试在画布区域上绘制一些图表。我的问题是...

我要画 1-4 个（或更多）圆圈。画布大小为 500 x 400 像素。我现在如何计算每个圆的最大半径以将所有内容放在此画布上并获取每个圆的位置（中心 x/y）？那么每个圆圈都可以最佳地放置在彼此之间有一些边距的区域上吗？

这里有一些示例屏幕向您展示我的意思...

多谢！

我使用 drawImage() 在画布上绘制了一个法师，并将其可见性设置为 false，我希望它在单击和鼠标悬停时可见。我该怎么办 ？谢谢

这是我到目前为止所写的，但这当然行不通