使用jCanvas.js構建AI2Canvas輸出

我使用Mike Swanson的AI> Illustrator插件（Illustrator）（found here），它非常適合將Illustrator創建導出到HTML5 Canvas元素，但導出的構建Canvas元素的JS會構建它以只讀方式。使用jCanvas.js構建AI2Canvas輸出

我試圖找出一種簡化的方法來將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性能。我只需要找出從Illustrator中設計的東西獲得的東西到<canvas>元素的最佳方式，然後我可以稍後使用JS訪問特定的元素。

來源

2017-08-25 Sam Griffiths

好吧，在深入挖掘jCanvas代碼&文檔後，我想出瞭如何將AI2Canvas的原始輸出轉儲到jCanvas中。

jCanvas .draw()具有的功能特性，可以讓你在常規畫布繪製代碼通過，並會造成斷基於此層。這裏也有一些注意事項，但：

必須設置函數調用內部的填充顏色（見下面的例子）
如果通過JS更新填充顏色後的函數調用覆蓋的對象所做的任何屬性更新
確保layer: true被設置成形狀爲jCanvas可以訪問

然後，我們只是通過一個獨特的name的對象，所以我們可以在以後引用它，使我們想要的任何調整圖層創建。

下面是一個使用從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();

來源

2017-08-25 21:30:11

使用jCanvas.js構建AI2Canvas輸出

回答

相關問題