AI2Canvas-Ausgabe mit jCanvas.js erstellen

Question

Ich verwende Mike Swansons AI> Canvas-Plug-in für Illustrator (found here). Es eignet sich hervorragend zum Exportieren einer Illustrator-Erstellung in ein HTML5-Canvas-Element, aber das exportierte JS, das das Canvas-Element erstellt in einer Weise, die schreibgeschützt ist.

Ich versuche, einen rationalisierten Weg zu finden, die AI2Canvas exportierten JS in jCanvas JS zu konvertieren, so dass ich Elemente innerhalb der Zeichenfläche dynamisch aktualisieren kann (z. B. Text aktualisieren, Farben ändern, usw.).

Die folgenden 2 Vergleiche sind für ein einfaches Rechteck:

AI2Canvas Exporte nach so etwas wie:

// layer1/Rectangle 
ctx.save(); 
ctx.beginPath(); 
ctx.moveTo(1000.8, 1000.0); 
ctx.lineTo(0.8, 1000.0); 
ctx.lineTo(0.8, 0.0); 
ctx.lineTo(1000.8, 0.0); 
ctx.lineTo(1000.8, 1000.0); 
ctx.closePath(); 
ctx.fillStyle = "rgb(237, 28, 36)"; 
ctx.fill(); 

jCanvas wäre so etwas wie:

$('canvas').drawLine({ 
    name: 'firstLine', // this allows me to access later for edits 
    closed: true, 
    fillStyle: "rgb(237, 28, 36)", 
    x1: 0, y1: 1000, 
    x2: 0, y2: 0, 
    x3: 1000, y3: 0, 
    x4: 1000, y4: 1000 
}); 

In diesem Fall wird ein Grund Rechteck, mich selbst zu konvertieren ist nicht schwierig. Wo es schwieriger wird, ist, wenn AI2Canvas zu etwas exportiert, das BezierCurves enthält, was nicht so einfach manuell in jCanvas-Eigenschaften umgewandelt werden kann.

Ich bin auch offen für etwas anderes als AI2Canvas & jCanvas - ich muß nur den besten Weg, um herauszufinden, von etwas in Illustrator in ein <canvas> Element entworfen zu bekommen, die ich dann bestimmte Elemente später mit JS zugreifen kann.

Answer 1

Ordnung, nach mehr in den jCanvas Code graben & docs habe ich herausgefunden, wie die rohe Ausgabe von AI2Canvas in jCanvas dump.

jCanvas .draw() verfügt über eine Funktionseigenschaft, mit der Sie normalen Zeichensatzcode übergeben und eine darauf basierende Ebene erstellen können. Es gibt einige Einschränkungen aber:

• Sie haben die Füllfarbe in dem Funktionsaufruf zu setzen (siehe Beispiel unten)
• Wenn Sie die Füllfarbe über JS aktualisieren später der Funktionsaufruf überschreibt alle Eigenschaft Updates zum Objekt gemacht
• stellen sie sicher, layer: true so eingestellt ist, dass die Form als eine Schicht erzeugt wird, die jCanvas

Dann zugreifen können, wir eine einzigartige name zum Objekt nur passieren, damit wir sie später und machen Anpassungen verweisen wir wollen .

Hier ist ein Beispiel für eine einzelne Formebene mit jCanvas Aufbau der Ausgabe von AI2Canvas mit:

$('canvas').draw({ 
     layer: true, 
     name: 'unique_test_name', 
     fillStyle: "red", 
     fn: function(ctx, shape) { 
      ctx.beginPath(); 
      ctx.moveTo(970.6, 984.3); 
      ctx.lineTo(584.2, 984.3); 
      ctx.bezierCurveTo(580.9, 984.3, 578.2, 981.6, 578.2, 978.3); 
      ctx.lineTo(578.2, 931.0); 
      ctx.bezierCurveTo(578.2, 927.7, 580.9, 925.0, 584.2, 925.0); 
      ctx.lineTo(970.6, 925.0); 
      ctx.bezierCurveTo(973.9, 925.0, 976.6, 927.7, 976.6, 931.0); 
      ctx.lineTo(976.6, 978.3); 
      ctx.bezierCurveTo(976.6, 981.6, 973.9, 984.3, 970.6, 984.3); 
      ctx.closePath(); 
      // this next one is important. must reference this shape's fillStyle so that color appears on initial draw, and will change color later when you change this shape's color via JS 
      ctx.fillStyle = shape.fillStyle; 

      ctx.fill(); 
     } 
     }); 

Und dann eine Eigenschaft wie die Füllfarbe Aktualisierung:

$('canvas').setLayer('unique_test_name', { fillStyle: 'green' }).drawLayers();