绘制并拖动线条的边缘

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

答案：

您无法轻松访问在画布中绘制的线条，并且如果要更改它，则必须重新绘制整个画布（这就是画布的工作方式）。如果要向绘制的属性添加事件处理程序，则应使用svg绘制此类内容：

SVG与画布之间的区别：

• SVG是一种用于描述XML中的2D图形的语言。
• 画布（使用JavaScript）动态绘制2D图形。
SVG是基于XML的，这意味着SVG DOM中的每个元素都可用。您可以为元素附加JavaScript事件处理程序。
• 在SVG中，每个绘制的形状都被记住为一个对象。如果更改了SVG对象的属性，则浏览器可以自动重新渲染形状。
• 画布是逐像素渲染的。在画布中，once the graphic is drawn, it is forgotten by the browser。如果应更改其位置，则需要重新绘制整个场景，包括图形可能覆盖的所有对象。

教程：

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