围绕一系列坐标绘制轮廓

Question

我有一组坐标，我想围绕它绘制轮廓。 This question describes my problem perfectly, but unfortunately many of the resources go to dead links, and while the first answer 是一个很好的解决方案，我在实施时遇到了问题。

我一直在尝试使用原始 JS canvas，因为它可以快速制作原型，但理想情况下，解决方案将与语言无关，因此我可以轻松地将其移植到另一种语言。

我已经完成了我认为最难的部分 - 计算偏移线的坐标。例如，下图中绿点是两条线从黑点偏移的坐标。

我正在努力解决的问题是找出访问每个偏移坐标的顺序。我已经开始尝试只计算轮廓的一侧，这就是我得到的结果：

黑点是轮廓坐标，绿点是偏移线坐标，编号的红线是按照访问偏移坐标的顺序排列的轮廓。

从 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 行是我非常确定需要进行更改的地方 - 根据某些条件（很可能考虑到两点的坐标），符号偏移量应该翻转。

我读过一些关于法线的东西，认为它们可能会有所帮助，但我不太确定如何计算它们，一旦我得到它们如何使用它们。

非常感谢您的帮助

编辑：为了澄清，我正在寻找一种生成一组坐标的方法，这些坐标在连接起来时形成一条线的轮廓

Answer 1

如果您只想画一个轮廓...
我过去使用的一种策略就是围绕形状旋转。
我们没有像您在图像上显示的那样得到多边形，这里是示例：

let s = 20; // thickness scale
let x = 25, y = 25; // final position

let shape = new Path2D();
shape.lineTo(0, 0);
shape.lineTo(50, 50);
shape.lineTo(80, 50);
shape.lineTo(120, 12);

var ctx = document.getElementById("canvas1").getContext("2d");

ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.translate(x, y);

for (i = 0; i < 360; i++) {
  ctx.save();
  ctx.translate(Math.sin(i * Math.PI / 180) * s, Math.cos(i * Math.PI / 180) * s);
  ctx.stroke(shape);
  ctx.restore();
}

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.stroke(shape);

<canvas id="canvas1" width="180" height="120"></canvas>

但同样的逻辑可以用于更复杂的形状，例如图像
这是应用于图像的：

var s = 20, // thickness scale
  x = 25, // final position
  y = 25;

var ctx1 = document.getElementById('canvas1').getContext('2d'),
  img1 = new Image;

img1.onload = draw1;
img1.src = "http://i.stack.imgur.com/UFBxY.png";

function draw1() {
  ctx1.globalAlpha = 0.01
  for (i = 0; i < 360; i++)
    ctx1.drawImage(img1, x + Math.sin(i * Math.PI / 180) * s, y + Math.cos(i * Math.PI / 180) * s);
  ctx1.globalAlpha = 1
  ctx1.drawImage(img1, x, y);
}

<canvas id="canvas1" width=350 height=500></canvas>

Answer 2

我终于破解了！根据点的 y 坐标是否大于其前身，需要翻转偏移量。这是我从示例中更改的代码：

outline_points = [] // Stores the outline
reverse_outline_points = [] // Stores the opposite of the outline
let a_offset_point, b_offset_point;
for (i=0; i<path.length-1; i++) {
  let mid_point = path[i]  
  let end_point = path[i+1]
  
  let offset = OFFSET
  if(end_point.y >= mid_point.y) {
    offset = -OFFSET
  }
  outline_points.push(mid_point.getOffsetPoint(end_point, 'blue', offset))
  outline_points.push(end_point.getOffsetPoint(mid_point, 'blue', offset))
  
  reverse_outline_points.push(mid_point.getOffsetPoint(end_point, 'blue', -offset))
  reverse_outline_points.push(end_point.getOffsetPoint(mid_point, 'blue', -offset))
  
}

这也计算了偏移量的补码，反向绘制给出了轮廓的两侧

围绕一系列坐标绘制轮廓

Drawing an outline around a series of coordinates

canvas

path

coordinates