javascript - 如何在不检查 Canvas 上的每个点的情况下获取 SVG 路径字符串中包含的所有点？

Question

是否有一种有效的方法来查找路径内每个点的 [x, y] 坐标，而无需使用 context.isPointInPath() 手动检查整个 Canvas 上的每个点？

来自 geojson 的示例路径

<path d="
  M 588, 173,
  L 588, 176,  L 585, 216,  L 585, 216,  L 584, 223,
  L 580, 274,  L 565, 273,  L 565, 273,  L 549, 271,
  L 539, 270,  L 535, 269,  L 513, 267,  L 503, 266,
  L 486, 264,  L 477, 262,  L 468, 261,  L 464, 260,
  L 455, 259,  L 449, 258,  L 451, 249,  L 452, 244,
  L 453, 233,  L 456, 218,  L 456, 215,  L 460, 192,
  L 460, 191,  L 462, 180,  L 463, 174,  L 463, 171,
  L 464, 167,  L 464, 161,  L 465, 158,  L 470, 159,
  L 471, 159,  L 477, 160,  L 477, 160,  L 480, 161,
  L 482, 161,  L 487, 161,  L 499, 163,  L 500, 163,
  L 514, 165,  L 534, 168,  L 535, 168,  L 544, 169,
  L 555, 170,  L 557, 170,  L 565, 171,  L 581, 173,
  Z"  
fill="transparent" stroke-width="1" stroke="black"></path>

例如，这就是我现在对 geojson 文件所做的:

  const points = [];
  const pointWidth = 2;

  for (let x = 0; x < canvasWidth; x += pointWidth) {
    for (let y = 0; y < canvasHeight; y += pointWidth) {

      for (const feature of countyGeoJson.features) {
        const d = pathGenerator(feature);
        const countyShape = new Path2D(d);

        if (context.isPointInPath(countyShape, x, y)) {
          points.push({ coords: [x, y], data: feature.properties });
          break;
        }
      }
    }
  }

基本上，我循环遍历 Canvas 网格中的每个点(超过一百万个)，并嵌套另一个循环来查看每个要素以确定该点是否在要素的投影路径字符串中。这是非常低效的，我的浏览器无法处理它。

有没有办法使用路径字符串本身来生成点？

Answer 1

这是我们在评论中讨论的内容的完整实现

var image = `
    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" version="1.1">
        <path d="
            M 588, 173,
            L588,176,  L585,216,  L585,216,  L584,223,  L580,274,  L565,273,  L565,273,  L549,271,
            L539,270,  L535,269,  L513,267,  L503,266,  L486,264,  L477,262,  L468,261,  L464,260,
            L455,259,  L449,258,  L451,249,  L452,244,  L453,233,  L456,218,  L456,215,  L460,192,
            L460,191,  L462,180,  L463,174,  L463,171,  L464,167,  L464,161,  L465,158,  L470,159,
            L471,159,  L477,160,  L477,160,  L480,161,  L482,161,  L487,161,  L499,163,  L500,163,
            L514,165,  L534,168,  L535,168,  L544,169,  L555,170,  L557,170,  L565,171,  L581,173,
            Z" fill="transparent" stroke-width="1" stroke="black">
        </path>
    </svg>`;

function inside(p, vs) {
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];
        var intersect = ((yi > p[1]) != (yj > p[1])) && (p[0] < (xj - xi) * (p[1] - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    return inside;
}

function draw() {
    ctx.drawImage(img, 0, 0);

    const matches = image.matchAll(/L(...),(...),/g)
    const poly = Array.from(matches, m => [Number(m[1]), Number(m[2])])

    let xs = poly.map(p => p[0]);
    let ys = poly.map(p => p[1]);
    let [xmin, xmax] = [Math.min(...xs), Math.max(...xs)];
    let [ymin, ymax] = [Math.min(...ys), Math.max(...ys)];

    ctx.globalAlpha = 0.5
    const pointWidth = 4
    for (let x = xmin; x <= xmax; x += pointWidth) {
        for (let y = ymin; y <= ymax; y += pointWidth) {
            if (inside([x, y], poly)) {
                ctx.beginPath();
                ctx.fillStyle = Math.random()<0.5? "blue" : "red"
                ctx.arc(x, y, 1.5, 0, 2 * Math.PI);
                ctx.fill();               
            }
        }
    }
}

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');


var img = new Image();
img.onload = draw
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(image);

<canvas id=canvas width=800 height=400></canvas>

• 里面的函数就是我提到的算法:
  https://en.wikipedia.org/wiki/Point_in_polygon#Ray_casting_algorithm

• function draw 是所有操作的地方，我们从 svg 路径收集所有匹配项，然后我们构建一个多边形，然后获取边界框并遍历它以找到什么在里面，如果我们在里面，我正在画一些东西。

我唯一遗漏的是找到匹配项的正确正则表达式模式:
image.matchAll(/L(...),(...),/g)这适用于我的简化示例，您需要为您的示例寻找合适的示例。

您可能不需要执行正则表达式，这完全取决于 countyGeoJson 中的结构，您可以直接从中提取多边形。