我有一个上面带有网格线的图像,希望允许用户在那些网格线上绘制较粗的线,并且每条线应从一个相交处移至下一个相交处。 我应该从哪里开始研究? 我意识到这可能是一个非常广泛的问题,我只是在这里寻找方向。 寻找php和jquery / javascript解决方案。

非常感谢,托德

===============>>#1 票数:5 已采纳

您可以使用<canvas>元素。

  1. 使用.drawImage()将图像加载到画布中。
  2. 为画布创建onclick处理程序并绘制线条。
  3. 使用toDataURL()画布的输出保存到图像中。

链接:

  • 答案演示了将图像绘制到画布上并使用.toDataURL()检索结果。

  • 答案包含如何获取画布上单击坐标的代码。

更新:

额外的好处: 这里是与:)一起玩的代码。 那里有工程图,但是必须添加捕捉到网格的功能。 经过Chrome和Firefox测试。

  ask by maddogandnoriko translate from so

未解决问题?本站智能推荐:

3回复

在java中绘制网格

我正在尝试使用for循环创建一个笛卡尔网格。 以下是我目前的代码的一部分; 当我运行它时,它不会产生一系列线条,而是产生一个窗口,它看起来像是一个白色面板,它会大大减慢我的计算机速度。 事实上,我必须启动任务管理器和结束任务,因为它甚至不会正常关闭。
1回复

为什么网格上的线的末端超过了该网格的给定宽度和高度?

我正在尝试绘制网格。 x列的行是5x6。 我的问题是,在东部和南部的行结尾超过了给定的列和行值。 它不大,也许只有一毫米,但仍然很烦人。 我希望网格看起来像一个矩形,在上述情况下,有20个单元格。 我的代码中的错误在哪里? 下面是绘制此有缺陷的网格的代码段。 谢谢!
1回复

在xcode / swift中绘制圆圈网格

我将如何在视图控制器中获得效果,如以下链接中附加的精美艺术品? 圆我有一些想法,从实际使用的ASCII文本(我知道,超级错误的方式),以图片的集合看来,我怀疑什么是“正确”的方式,与核心显卡来完成。 但是我要问的是,有一天我会发现一种超级简单/正确的方法,并且可以解决问题。
1回复

用Python绘制网格,颜色对应于不同的值

我试图绘制一个网格,其中为每个值绘制一个相应的颜色。 例如: 会显示为9x5网格,带有蓝色边框(代表1),黑色填充(代表0),底部有2x2红色方块(代表2)。 显然,这可以通过imshow完成,但是我不知道语法是什么。 在此先感谢您的帮助!
2回复

简单的网格绘制不起作用

我正在尝试在画布上绘制一个简单的网格。 首先我做到了 工作正常。 但我希望能够轻松更改网格和画布的大小。 所以我这样做: 这是行不通的! 请帮我。 PS。 我正在使用图书馆。 `
2回复

如何使用Python绘制网格世界

我想绘制一个网格世界(类似于表格),其中单元格可能包含机器人或障碍物。 点/箭头可以表示机器人并将单元格用黑色着色,例如可以代表障碍物。 我不是在寻找任何复杂的东西,只是一个简单的python库可以帮助我做到这一点。 有什么建议么?
2回复

Java将游戏板绘制为网格

嘿,我试图画一个网格。 我已经缩小了一个2D数组,并且试图用Rectangle2D填充它。 我希望网格是一个可以在其上继续前进的角色的正方形。 这是我的代码: 有一个编译错误,并且不允许我在此数组中存储矩形。 我也怀疑它是否会构成网格。
2回复

在SVG中绘制1px网格的最佳/最短方法

我需要使用嵌入在网页中的SVG画布绘制1px网格(10px间距)。 有许多SVG标签可供选择,我希望有人可以建议哪种标签最适合这项工作并产生最少量的代码。 例如,使用<path>标签绘制路径是否有更短的替代方法? 也许通过定义一个10px x 10px的正方形然后以某种方式
1回复

C#storyboard从下到上绘制网格

我有一个网格(也可能是一个矩形),我想从它的底部到顶部绘制。 这是一个很长的直线空间吧。 我可以使用C#中的代码从中间到顶部和底部绘制: 但是我无法从底部到顶部绘制它,而不是从中间到底部和顶部。 有人可以帮我吗? :)
1回复

如果将网格按行和单元格拆分,并且每行内部都包含一个堆栈面板,是否可以在C#wpf(网格)中绘制形状?

当我尝试绘制形状(如线)时,仅在第一个StackPanel中起作用 这是网格的图片。 我尝试创建一个塔防游戏,我想让塔在网格上攻击(使用线条/形状),但似乎draw方法仅在我的第一个堆栈面板图像中有效(参见左图)最佳)。 有什么我做不对的事情吗? 还是我应该使用其他方法代替塔