【发布时间】：2022-01-13 18:38:04
【问题描述】：
我有一组坐标，我想在周围画出轮廓。 This question 完美地描述了我的问题，但不幸的是，许多资源都进入了死链接，虽然 the first answer 是一个很好的解决方案，但我在实现它时遇到了麻烦。
我一直在尝试使用原始 JS 画布，因为它可以快速进行原型设计，但理想情况下，解决方案将与语言无关，因此我可以轻松地将其移植到另一种语言。
我已经设法完成了我认为最困难的事情 - 计算偏移线的坐标。例如，在下图中，绿点是从黑点偏移的两条线的坐标。
我正在努力解决的问题是确定访问每个偏移坐标的顺序。我已经开始尝试只计算轮廓的一侧，这就是我已经走了多远：
黑点是要勾勒的坐标，绿点是偏移线坐标，带编号的红线是按照偏移坐标访问顺序的轮廓。
从 0 到 1 的第一行是正确的，但是点 2 应该是这四个点的左上角，点 3 也是如此。
这是我用来生成路径的代码。
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
const OFFSET = 10
ctx.fillStyle = '#aaa';
ctx.fillRect(0, 0, 400, 400);
class Point {
constructor(x, y, colour = 'black') {
this.x = x
this.y = y
this.colour = colour
}
draw() {
// Draws a dot at the x, y coords
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);
ctx.fillStyle = this.colour;
ctx.fill();
}
getOffsetPoint(lastPoint, colour, offset) {
let gradient = -1 / ((this.y - lastPoint.y) / (this.x - lastPoint.x))
let a = new Point(0, 0, colour)
let b = new Point(0, 0, colour)
if (gradient == 0) {
a.x = this.x + offset
a.y = this.y
} else if (gradient == Infinity) {
a.x = this.x
a.y = this.y + offset
} else {
let dx = (offset / Math.sqrt(1 + (gradient * gradient)));
let dy = gradient * dx;
a.x = this.x + dx;
a.y = this.y + dy;
}
a.draw()
return a;
}
label(text) {
ctx.fillStyle = 'black'
ctx.font = "14px Arial";
ctx.fillText(text, this.x + 4, this.y);
}
}
/* Draws example two points and the offset coords
let a = new Point(50, 20)
let b = new Point(70, 70)
a.draw()
b.draw()
a.getOffsetPoint(b, 'green', 10)
a.getOffsetPoint(b, 'green', -10)
b.getOffsetPoint(a, 'green', 10)
b.getOffsetPoint(a, 'green', -10)
*/
// The path we want to outline
path = [new Point(100, 100), new Point(150, 200), new Point(200, 100), new Point(250, 300), new Point(300, 300), new Point(250, 350), new Point(100, 310)]
for (i = 0; i < path.length; i++) {
path[i].draw()
}
outline_points = [] // Stores the outline
let a_offset_point, b_offset_point;
for (i = 1; i < path.length; i++) {
let a = path[i - 1]
let b = path[i]
let offset = OFFSET;
// if (some condition) { offset = offset * -1 }
// Draws the offset points, and labels them with the order they'll be visited in
a_offset_point = a.getOffsetPoint(b, 'green', offset)
a_offset_point.label(outline_points.length);
outline_points.push(a_offset_point)
b_offset_point = b.getOffsetPoint(a, 'green', offset)
b_offset_point.label(outline_points.length);
outline_points.push(b_offset_point)
// Draw the other two offset points we're not visiting
a.getOffsetPoint(b, 'green', -offset)
b.getOffsetPoint(a, 'green', -offset)
}
// Draws the outline path
ctx.beginPath()
ctx.moveTo(outline_points[0].x, outline_points[0].y)
for (i = 1; i < outline_points.length; i++) {
ctx.lineTo(outline_points[i].x, outline_points[i].y)
}
ctx.strokeStyle = 'red'
ctx.stroke();<canvas id="canvas" width=400 height=400>
</canvas>这有点笨拙，但第 86 行是我很确定需要进行更改的地方 - 根据某些条件（很可能考虑到两点的坐标），偏移量的符号应该被翻转。
我读过一些关于法线的文章，并认为它们可能会有所帮助，但我不太确定如何计算它们，然后在我得到它们后如何使用它们。
非常感谢您的帮助
编辑：澄清一下，我正在寻找一种生成一组坐标的方法，这些坐标在连接时形成一条线的轮廓
【问题讨论】：
标签： canvas path coordinates