javascript - 在画布上绘制平行线
问题描述
我正在尝试在画布上绘制平行线。固定其中一条线。用户输入两条线之间的距离,因此第二条线被相应地定位。我是 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();
解决方案
平行线
绘制与现有线平行的线。
- 获取从行首到行尾的向量。
- 使用该向量来获取线的长度
- 将偏移距离除以线的长度以获得偏移比例
- 按偏移比例缩放线向量
- 将缩放的矢量添加到线的末端并绘制。
查看示例函数drawLine
获取输入
要从输入元素中获取值,请使用 elementsvalue
属性。
要在值更改时获取值,请使用 elementsaddEventListener
函数添加事件侦听器。. 不要将侦听器直接分配给元素事件属性,例如避免这样做myElement.oninput = ()=> {/* ... code */};
有多种输入事件。您可以根据需要使用一种或多种。在这种情况下,有两个事件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>
推荐阅读
- excel - 如何使用 VBA 将我的数据透视表过滤器置于彼此之上?
- google-sheets - 忽略 Google 表格中的数据验证错误
- swift - 我需要从此函数返回一个值,并且我有 2 个参数。我无法完成转义功能
- javascript - 倒数计时器到期后设置标题
- c# - 单击按钮时更改动态创建的文本框的值 C#
- python - 从 JSON 切换到 yaml 配置文件时蛇文件中的字符串索引错误
- php - 使用查询字符串不工作的 Mod 重写规则 / WordPress、Apache、Virtualmin
- javascript - CF7 在 5 秒后隐藏 `.wpcf7-mail-sent-ok`
- html - 访问 URL 时发送授权标头
- swift - 使按钮在单击时出现和消失