绘制并拖动线条的边缘答案

【问题标题】：Draw and drag the edges of the line绘制并拖动线条的边缘
【发布时间】：2019-01-14 06:20:53
【问题描述】：

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

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) 点。

【问题讨论】：

How to Create a Draggable Line in HTML5 Canvas?的可能重复
因为他正在拖动最近的线，但我想拖动线的边缘。
假设如果我拖动点b那么坐标应该是。
嗨@ram 欢迎来到 SO。使用画布，您基本上将不得不以艰难的方式完成所有工作（除非您使用提供所需功能的库）。画布没有任何关于在其上绘制的线或哪一端是哪一端的概念。它只知道有一堆彩色像素。你知道它们看起来像一条线。画布不在乎。如果您需要在鼠标移到行尾时做出响应，那么您必须检测光标位置，将其与您知道的位置进行比较，然后行尾是等等等等。
例如看看这位绅士的崇高努力做类似的事情......simonsarris.com/making-html5-canvas-useful

【解决方案1】：

答案：

您无法轻松访问您在画布中绘制的线条，如果您想更改它，您必须重新绘制整个画布（这就是画布的工作方式）。如果你想为一个绘制的属性添加一个事件处理程序，你应该使用 svg 来绘制这样的内容：

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

【讨论】：