Question

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

是否有人熟悉此问题，并且知道我可以生成SVG路径以便可以呈现x-browser的方式。适用于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

非常感谢！

Answer 1

您的SVG数据命令奇怪地形成

您的M＆amp;每个子路径的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.Circle或Fabric.Polyline绘制它们。

以下示例代码和演示（使用原生画布）：

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

注意：点在画布的右下方绘制，因此您必须向下滚动“堆栈片段”窗口或以整页模式查看它。

＆＃13;

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();

＆＃13;

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

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

使用Fabric JS中的SVG路径绘制点

1 个答案: