Question

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

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

enter image description here

我在中间放了一些文字，我想要的效果就是这样：

enter image description here

我用静态画布等尝试过各种各样的东西，但我已经走到了尽头。请有人帮忙吗？这是我目前的尝试：

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属性获得效果

enter image description here

// 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);   
});

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

在此之后，您在白色背景上有彩色文字。现在有一个黑色背景画一个矩形大作为画布，但指定globalCompositeOperation = 'destination-over'

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

FabricJS中的文本颜色覆盖

1 个答案: