如何绘制通过 PaperJS/JS 中的 JSON 请求传送 segments/points 的行？

Question

使用 PaperJS 或 JS 中的一般绘图 paths/segments 的最佳方式是什么，我为此接收的数据是通过 JSON？

Answer 1

解析 JSON 数据的方式取决于它的形状，但更一般地说，在 Paper.js 中显示点包括绘制一系列圆圈。
这是一个 sketch 演示可能的实现。

// This represents the data that you receive, assuming that each point is a [x,y] coordinates array.
const points = [[62, 44], [182, 108], [246, 220], [231, 35], [357, 419], [246, 292], [7, 204], [188, 375], [70, 406], [481, 274], [341, 314], [158, 269], [446, 204], [78, 197], [287, 207], [435, 317], [11, 168], [467, 110], [195, 282], [481, 14], [20, 384], [19, 262], [133, 205], [105, 261], [16, 457], [83, 401], [104, 62], [25, 188], [6, 307], [13, 118], [157, 258], [35, 155], [38, 93], [332, 347], [216, 351], [42, 92], [96, 168], [201, 446], [353, 336], [444, 348], [19, 452], [433, 173], [112, 227], [419, 153], [378, 47], [38, 89], [150, 122], [423, 58], [61, 446], [14, 331]];

for (let [x, y] of points) {
    new Path.Circle({
        center: [x, y],
        radius: 2,
        fillColor: 'orange'
    });
}

这种方法的唯一缺点是，如果你有很多点，性能可能会成为一个问题。
如果是这种情况，并且以后不需要与点交互，则可以直接使用 canvas 上下文 arc() 方法直接在 canvas 上绘制圆圈。

// This represents the data that you receive, assuming that each point is a [x,y] coordinates array.
const points = [[62, 44], [182, 108], [246, 220], [231, 35], [357, 419], [246, 292], [7, 204], [188, 375], [70, 406], [481, 274], [341, 314], [158, 269], [446, 204], [78, 197], [287, 207], [435, 317], [11, 168], [467, 110], [195, 282], [481, 14], [20, 384], [19, 262], [133, 205], [105, 261], [16, 457], [83, 401], [104, 62], [25, 188], [6, 307], [13, 118], [157, 258], [35, 155], [38, 93], [332, 347], [216, 351], [42, 92], [96, 168], [201, 446], [353, 336], [444, 348], [19, 452], [433, 173], [112, 227], [419, 153], [378, 47], [38, 89], [150, 122], [423, 58], [61, 446], [14, 331]];

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

for (let [x, y] of points) {
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, 2 * Math.PI);
    ctx.fill();
}

<canvas width="500" height="500"></canvas>

如何绘制通过 PaperJS/JS 中的 JSON 请求传送 segments/points 的行？

How to plot lines where the segments/points are delivered via a JSON request in PaperJS/JS?

javascript

json

paperjs