javascript - 绘制并拖动线的边缘

Question

我想画一条线，让它从两端都可以拖动。使用鼠标单击我可以画线，但我想拖动线并稍后调整它的大小。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(10,20);
ctx.lineTo(100, 120);
ctx.stroke();

假设我将点 b 拖动到 (200,150)
那么坐标应该是点 A(10,20) 和点 B(200,150)。

Answer 1

回答:

您无法轻松访问在 Canvas 中绘制的线条，如果要更改它，则必须重新绘制整个 Canvas (这就是 Canvas 的工作原理)。如果你想给绘制的属性添加一个事件处理程序，你应该使用 svg 来绘制这样的内容:

SVG 和 Canvas 的区别:

• SVG 是一种用 XML 描述二维图形的语言。
• Canvas 动态绘制二维图形(使用 JavaScript)。
• SVG 是基于 XML 的，这意味着每个元素都可以在 SVG DOM 中使用。您可以为元素附加 JavaScript 事件处理程序。
• 在 SVG 中，每个绘制的形状都被记住为一个对象。如果更改 SVG 对象的属性，浏览器可以自动重新呈现形状。
• Canvas 是逐像素渲染的。在 canvas 中，一旦图形被绘制出来，它就会被浏览器遗忘。如果要更改其位置，则需要重新绘制整个场景，包括可能已被图形覆盖的任何对象。

教程:

• 了解有关 svg 的更多信息 here .
• 了解如何 Draw SVG with a mouse .