Question

我想在不同位置的amcharts.com图表中添加多个水印/叠加图像。

使用amcharts.com示例（此处：http://codepen.io/team/amcharts/pen/dc7015c33872771cf6e45e7752eaffe3）作为起点，我尝试多次调用setOverlayImage函数（每个图像一次），使用不同的顶部/左侧坐标来改变图像的位置。例如：

canvas.setOverlayImage(url, canvas.renderAll.bind(canvas), {
    scaleX: 1,
    scaleY: 1,
    top: 3,
    left: 3,
    originX: 'left',
    originY: 'top'
});
canvas.setOverlayImage(url, canvas.renderAll.bind(canvas), {
    scaleX: 1,
    scaleY: 1,
    top: 3,
    left: 1470,
    originX: 'left',
    originY: 'top'
});

请注意，此处使用相同的图像（由url设置），但我最终希望灵活地使用不同的图像（由不同的URL设置）。但是，它似乎只显示在最后一次调用setOverlayImage时定义的位置的图像（例如，top：3和left：1470，在上例中）。

是否可以使用setOverlayImage添加多个图像？如果没有，有人可以建议一个与amcharts兼容的替代方案吗？

Answer 1

似乎您不能在同一画布上使用setOverlayImage用于不同的图像，即使Fabric API文档没有明确提及对此的任何限制。我设法通过使用fabric.Image.fromURL并使用canvas对象的add方法通过回调添加生成的图像对象来完成这项工作：

fabric.Image.fromURL(url, function(img) {
  img.set({
    top: 150,
    left: 500
  });
  canvas.add(img);
});

fabric.Image.fromURL(url, function(img) {
  img.set({
    top: 250,
    left: 700
  });
  canvas.add(img);
});

我将codepen分叉并在此处进行了上述更改：http://codepen.io/team/amcharts/pen/aae3c1ed6cda9da3d9914aadddd436fd?editors=0010

关于Image object的Fabric文档列出了您可以通过set方法设置的所有属性，以便根据需要操作图像。

将多个水印/叠加图像添加到amcharts.com图表

1 个答案: