在 Fabric JS 中使用 SVG 路径绘制点答案

【问题标题】：Plot points using SVG path in Fabric JS在 Fabric JS 中使用 SVG 路径绘制点
【发布时间】：2016-09-09 16:11:29
【问题描述】：

我需要能够在 HTML 画布上将点绘制为 SVG 路径。我将 Fabric JS 与 OpenSeaDragon 一起使用。我生成的路径适用于 Firefox，但不适用于任何其他浏览器。似乎其他浏览器期望一条连续的路径，并且只会呈现最后一点。我不能使用 fabric.circle，因为我需要渲染 1000 点。

有没有人熟悉这个问题，并且知道我可以生成 SVG 路径以便可以在 x 浏览器中呈现它的方法。适用于 Firefox 的格式为：

移动、直线、关闭并重复尽可能多的点。例如： M 25333 15819 L 25333 15819 Z
M 25116 15764 L 25116 15764 Z
M 24396 15437 L 24396 15437 Z
M 23976 16585 L 23976 16585 Z
M 23976 16579 L 23976 16579 Z
M 23977 16576 L 23977 16576 Z

非常感谢！

【问题讨论】：

标签： canvas svg fabricjs

【解决方案1】：

你的 SVG 数据命令的格式很奇怪

您的 M 和 L 值对于每个子路径都是相同的，因此您实际上不是在画线，而是在画点。根据您的问题，我假设这就是您想要的...绘制一系列点，每个点由一个 M L 命令定义。

从 SVG 命令获取点

将您的 Svg M+L 命令解析为 Canvas moveTo+lineTo 命令，并将这些画布命令放入单个 beginPath。

您的示例data 具有简单的统一结构，因此您可以使用.split 对其进行解析。如果你的实际data 更复杂，你可以使用regEx 来解析它。

var data='M 25333 15819 L 25333 15819 Z  M 25116 15764 L 25116 15764 Z  M 24396 15437 L 24396 15437 Z M 23976 16585 L 23976 16585 Z  M 23976 16579 L 23976 16579 Z  M 23977 16576 L 23977 16576 Z';

var canvasPts=[];
var dataCmds=data.split('M');
for(var i=1;i<dataCmds.length;i++){
    var cmd=dataCmds[i].split(' ');
    canvasPts.push({x:parseInt(cmd[1]),y:parseInt(cmd[2])});
}

解析出点集后，您可以使用Fabric.Circles 或Fabric.Polyline 绘制它们，如果您想要连接点。

这是示例代码和演示（使用原生画布）：

您的坐标非常大，所以这个演示将每个坐标除以 100

注意：这些点绘制在画布的右下方，因此您必须向下滚动 Stack Snippet 窗口或以全页模式查看。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var data='M 25333 15819 L 25333 15819 Z  M 25116 15764 L 25116 15764 Z  M 24396 15437 L 24396 15437 Z M 23976 16585 L 23976 16585 Z  M 23976 16579 L 23976 16579 Z  M 23977 16576 L 23977 16576 Z';

var canvasPts=[];
var dataCmds=data.split('M');
for(var i=1;i<dataCmds.length;i++){
    var cmd=dataCmds[i].split(' ');
    canvasPts.push({x:parseInt(cmd[1]),y:parseInt(cmd[2])});
}

var ptRadius=2;
ctx.beginPath();
for(var i=0;i<canvasPts.length;i++){
    var x=canvasPts[i].x/100;
    var y=canvasPts[i].y/100;
    ctx.moveTo(x+ptRadius,y);
    ctx.arc(x,y,ptRadius,0,Math.PI*2);
}
ctx.fill();

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;

【讨论】：