Fabric JSのSVGパスを使用するプロットポイント

Question

HTMLキャンバス上のSVGパスとしてポイントをプロットできる必要があります。私はOpenSeaDragonでFabric JSを使用しています。私が生成したパスはFirefox上で動作しますが、他のブラウザでは動作しません。それは他のブラウザが連続的な経路を期待し、最後の点だけをレンダリングするようです。私は1000点のレンダリングが必要なので、fabric.circleを使うことはできません。

誰もがこの問題に慣れていて、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

多くの感謝！

Answer 1

あなたのSVGデータコマンドは奇妙

あなたM & L値を形成しているあなたは本当に線を描画していないので、各サブパスについて同一である、あなたはポイントを描画しています。あなたの質問から、私はこれがあなたが望むものだと仮定します... 1つのM Lコマンドで定義された各点で一連の点を描きます。 SVGからポイントを取得

は、あなたのSVG M + Lは、キャンバスの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 SまたはFabric.Polylineでそれらを描くことができますポイントは、設定して解析したら。

ここでサンプルコードと（ネイティブキャンバスを使用して）デモです：

あなたの座標は非常に大きいので、このデモは、それぞれ100

によって座標注意を分割：点は、下に描かれていますキャンバスの右側に表示されるので、スタックスニペットウィンドウをスクロールダウンするかフルページモードで表示する必要があります。

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; }

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