使用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();