使用jCanvas.js构建AI2Canvas输出

Question

我正在使用Mike Swanson的AI > Canvas plugin for Illustrator (found here)，它非常适合于将Illustrator创建的内容导出到HTML5画布元素，但构建画布元素的导出JS以只读的方式构建它。

我正在尝试找出一种简化的方法来将AI2Canvas导出的JS转换为jCanvas JS，这样我就能够动态地更新画布中的元素(例如，更新文本、更改颜色等)。

以下两个比较是针对基本矩形的：

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()有一个函数属性，可以让你传入常规的画布绘制代码，它将基于此创建一个层。不过，也有一些警告：

• 您必须在函数调用中设置填充颜色(请参阅下面的示例)
• 如果稍后通过JS更新填充颜色，函数调用将覆盖对object
• 所做的任何属性更新确保设置了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();