javascript - FabricJS 中的文本颜色叠加

Question

我正在尝试在 FabricJS 中创建一种效果，其中我添加到 Canvas 中的某些文本的颜色由纹理决定。应该很容易，但是当我将纹理应用为图案时，我无法计算出使它工作所需的比例、旋转等组合。在我看来，图案正在“局部”应用于对象，因此 (0,0) 是对象的左上角坐标，而不是整个图像的坐标。

如果这是我的文字颜色纹理，

然后我在中间放了一些文字，我想要的效果是这样的:

我用静态 Canvas 等尝试过各种方法，但我已经走到了死胡同。请问有人可以帮忙吗？这是我目前的尝试:

var patternSourceCanvas = new fabric.StaticCanvas();

    oImg.setAngle(-angles[i]);

    patternSourceCanvas.add(oImg);

    var pattern = new fabric.Pattern({
      source: function() {

       patternSourceCanvas.setDimensions({
          width: oImg.getWidth(),
          height: oImg.getHeight()
        });

        return patternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });


    var text = new fabric.Text(entry, {
      originX: 'center',
      originY: 'center',
      left: (coords[i][0] * bufWidth),
      top: (coords[i][1] * bufHeight),
      fill: pattern,
      centeredRotation: true,
      angle: angles[i],
      fontFamily: 'Kapra',
      fontSize: 42
    });

非常感谢!

Answer 1

我有了这个想法，你可以使用 fabricJs 对象的 globalCompositeOperation 属性来获得效果

// clear canvas
canvas.clear();

    var text = new fabric.Text('AAAAA', {
      originX: 'center',
      originY: 'center',
      left:30,
      top: 30,
      fill: 'rgba(0,0,0,1)',
      centeredRotation: true,
      angle: 20,
      fontSize: 100,
    });
canvas.add(text);
fabric.Image.fromURL('../assets/pug.jpg', function(oImg) { 
  oImg.globalCompositeOperation = 'source-atop';
  oImg.width = canvas.width;
  oImg.heigth = canvas.height;
  canvas.add(oImg);
  var rect = new fabric.Rect({
    width: 200,
    height: 200,
    globalCompositeOperation: 'destination-over',
    fill: 'black'
  });
  canvas.add(rect);   
});

所以基本上你可以用任何颜色渲染文本，黑色。 然后在文本上渲染彩色图像，覆盖所有 Canvas ，指定 globalCompositeOperation = 'source-atop'

在此之后，您将在白色背景上看到彩色文本。 要有黑色背景，现在绘制一个与 Canvas 一样大的矩形，但指定 globalCompositeOperation = 'destination-over'

所以你会做一些完全不同的事情，但它会起作用。 可能需要调整，可能不适合您的需求。但它应该显示您发布的示例。