javascript - 在 Canvas 上绘制平行线

Question

我想在 Canvas 上画平行线。其中一条线路已修复。用户输入两条线之间的距离，因此第二条线被相应地定位。我是 JavaScript 的新手。请帮助我如何根据用户输入更改第二行的位置。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
console.log('myCanvas');

//Fixed Line
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(300,200);
ctx.strokeStyle='white';
ctx.stroke();

//moving line
ctx.beginPath();
ctx.moveTo(50,250);
ctx.lineTo(300,250);
ctx.strokeStyle='white';
ctx.stroke();

Answer 1

平行线

绘制一条与现有线平行的线。

• 获取从行首到行尾的向量。
• 使用该向量获取线的长度
• 将偏移距离除以线的长度得到偏移比例
• 按偏移比例缩放线向量
• 将缩放后的矢量添加到直线的末端并绘制。

参见示例函数drawLine

获取输入

要从输入元素中获取值，请使用元素 value属性(property)。

要在更改时获取值，请使用元素 addEventListener 添加事件监听器功能。 .不要将监听器直接分配给元素事件属性，例如避免执行 myElement.oninput = ()=> {/* ... code */};

有多种输入事件。您可以根据需要使用一种或多种。在这种情况下，有两个事件 change和 input .参见示例。

• change当用户提交对值的更改时触发
• input当输入值发生任何变化时触发

始终为输入值分配一个有意义的值，如果空无意义，则不要将其留空。

例子

const ctx = myCanvas.getContext("2d");
const myLine = {
    from: {x: 50, y: 50},
    to: {x: 150, y: 200},
    style: {strokeStyle: "#000", lineWidth: 2}
};
distanceElement.addEventListener("input", inputEvent);
var lineOffset = distanceElement.value;
drawLines();
function inputEvent(e) {
    lineOffset = e.target.value;
    drawLines();
}
function drawLines() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawLine(myLine);
    lineOffset !== 0 && drawLine(myLine, lineOffset);
}
function drawLine(line, offset = 0) {
    var [ox, oy] = [0, 0];  
    Object.assign(ctx, line.style);
    if (offset) {
        const [dx, dy] = [line.from.x - line.to.x, line.from.y - line.to.y];
        const scale = offset / (dx * dx + dy * dy) ** 0.5;
        [ox, oy] = [-dy * scale, dx * scale];
    }
    ctx.beginPath();
    ctx.lineTo(ox + line.from.x, oy + line.from.y);
    ctx.lineTo(ox + line.to.x, oy + line.to.y);
    ctx.stroke();
}
        

input {display:block;}

<label for="distanceElement">Line offset distance:</label>
<input id="distanceElement" placeholder="Enter Distance" type="number" value="0">
<canvas id="myCanvas" width="250" height="250"></canvas>