使用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访问特定的元素。

答

好吧，在深入挖掘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();

使用jCanvas.js构建AI2Canvas输出

相关推荐