AI2Canvasの出力をjCanvas.jsで構築する

Question

私はMike SwansonのAI> CanvasプラグインをIllustrator用に使用しています（found here）、Illustratorの作成をHTML5 Canvas要素にエクスポートするのには最適ですが、Canvas要素を構築する、読み取り専用の方法で実行します。

AI2Canvasの書き出しJSをjCanvas JSに変換するための合理的な方法を理解して、キャンバス内の要素を動的に更新できるようにしようとしています（テキストの更新、色の変更など）。

次の2つの比較は、基本的な長方形のためのものです：

// 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は以下のようになり、何かのように：この例では

$('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 
}); 

、基本のようなものに

AI2Canvas輸出長方形、自分自身を変換することは難しくありません。難しいところは、AI2CanvasがBezierCurvesを含むものにエクスポートするときです。これは手動でjCanvasプロパティに変換するのは簡単ではありません。

私もAI2Canvas & jCanvas以外の何かに開いている - 私はちょうど私は、JSと後で特定の要素にアクセスすることができます<canvas>要素にIllustratorで設計された何かから取得するための最良の方法を把握する必要があります。

Answer 1

さらに、jCanvasコード&のドキュメントを掘り下げた後、AI2Canvasの生の出力をjCanvasにダンプする方法を知りました。

jCanvas .draw()には、通常のキャンバスの描画コードを渡すことができる関数プロパティがあり、これを基にしてレイヤーを作成します。いくつかの注意点ががあります：

• あなたはJSを経由して、塗りつぶしの色を更新する場合は、
• （以下の例を参照）関数呼び出し内の塗りつぶしの色を設定する必要があり、後の関数呼び出しは、オブジェクトに対して行われたすべてのプロパティの更新を無効にします
• 形状がjCanvasは、我々はそれを後で参照できるように続いて、私たちは、オブジェクトへのユニークなnameを渡す

にアクセスし、私たちが望む任意の調整を行うことができます層として作成されるようにlayer: trueが設定されていることを確認。

$('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(); 
     } 
     }); 

そして、塗りつぶしの色のようないくつかのプロパティを更新：ここで

がAI2Canvasからの出力を使用してjCanvas持つ単一シェイプレイヤーを構築する例を示します

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