Question

我正在使用Mike Swanson的AI＆gt; Illustrator（found here）的Canvas插件，它非常适合将Illustrator创建导出到HTML5 Canvas元素，但是构建Canvas元素的导出JS以只读方式构建它。

我正在尝试找出一种简化的方法将AI2Canvas导出的JS转换为jCanvas JS，以便我能够动态更新画布中的元素（例如更新文本，更改颜色等）。 / p>

以下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＆amp; jCanvas - 我只需要弄清楚从Illustrator中设计的东西到<canvas>元素的最佳方法，然后我可以使用JS访问特定元素。

Answer 1

好的，在深入研究jCanvas代码＆amp; docs我想出了如何将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输出

1 个答案: