使用jCanvas.js構建AI2Canvas輸出

Question

我正在使用Mike Swanson的AI> Illustrator的AI> Canvas插件（ 在此處找到 ），非常適合將Illustrator創建的內容導出到HTML5 Canvas元素，但是構建Canvas元素的導出的JS以只讀方式構建它。

我試圖找出一種簡化的方法，將AI2Canvas導出的JS轉換為jCanvas JS，以便能夠動態更新畫布中的元素（例如，更新文本，更改顏色等）。

以下2個比較是針對基本矩形的：

AI2Canvas導出為以下內容：

// 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導出到包含BezierCurves的東西時，變得更加棘手，而手動將其轉換為jCanvas屬性並不容易。

我還對AI2Canvas和jCanvas以外的東西持開放態度-我只需要找出從Illustrator中設計的東西轉換為<canvas>元素的最佳方法，然后可以在以后使用JS訪問特定元素。

Answer 1

好了，在深入研究了jCanvas代碼和文檔之后，我弄清楚了如何將AI2Canvas的原始輸出轉儲到jCanvas中。

jCanvas .draw()具有一個function屬性，該屬性使您可以傳遞常規的畫布繪制代碼，並將以此為基礎創建一個圖層。 有一些警告：

• 您必須在函數調用內設置填充顏色（請參見下面的示例）
• 如果稍后通過JS更新填充顏色，則函數調用將覆蓋對對象所做的所有屬性更新
• 確保設置了layer: true ，以便將形狀創建為jCanvas可以訪問的圖層

然后，我們只需將唯一的name傳遞給Object，以便以后可以引用它並進行所需的任何調整。

這是一個使用AI2Canvas的輸出使用jCanvas構建單個形狀圖層的示例：

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

然后更新一些屬性，例如填充顏色：

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