Punkte mit SVG-Pfad in Fabric JS plotten

Question

Ich muss Punkte als SVG-Pfad auf HTML-Canvas plotten können. Ich verwende Fabric JS mit OpenSeaDragon. Der Pfad, den ich erstellt habe, funktioniert mit Firefox, funktioniert aber nicht mit einem anderen Browser. Es scheint, dass andere Browser einen kontinuierlichen Pfad erwarten und nur den letzten Punkt darstellen. Ich kann fabric.circle nicht verwenden, da ich 1000 Punkte rendern muss.

Ist jemand mit diesem Problem vertraut, und weiß, wie ich einen SVG-Pfad generieren kann, so dass es x-Browser gerendert werden kann. Das Format, das auf Firefox funktioniert, ist:

Verschieben, Linie, schließen und für so viele Punkte wiederholen. Beispiel: 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

Vielen Dank!

Answer 1

Ihre SVG-Daten-Befehle sind seltsam geformt

Ihre M & L Werte sind die gleichen für jede subpath so dass Sie nicht wirklich Linien zeichnen, die Sie zeichnen Punkte. Von Ihrer Frage ausgehend nehme ich an, dass dies das ist, was Sie wollen ... um eine Reihe von Punkten mit jedem Punkt zu zeichnen, der durch einen M L Befehl definiert ist.

Erste Punkte von SVG-Befehle

Parse Ihre Svg M + L-Befehle in Canvas moveTo + lineTo Befehle und stellen jene Leinwand in einem einzigen beginPath-Befehle.

Ihr Beispiel data hat eine einfache einheitliche Struktur, so dass Sie es mit .split analysieren können. Wenn Ihre tatsächliche data komplexer ist, können Sie regEx verwenden, um es zu analysieren.

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

Sobald Sie Ihre parsen Punkte-stellen Sie sie mit Fabric.Circle s oder mit Fabric.Polyline ziehen können, wenn Sie die Punkte verbunden werden soll.

Hier ist Beispielcode und eine Demo (mit nativen Leinwand):

Ihre Koordinaten sind sehr groß, so dass diese Demo jeweils 100

Hinweis koordinieren teilt: die Punkte in der unteren gezogen Auf der rechten Seite der Arbeitsfläche müssen Sie das Stapel-Snippet-Fenster nach unten scrollen oder es im Vollseitenmodus anzeigen.

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>