0

我正在为 Illustrator 使用 Mike Swanson 的 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 访问特定元素。

4

1 回答 1

0

好吧，在深入研究 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-25T21:30:11.163 回答