FabricJS中的文本颜色叠加

Question

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

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

和我把一些文字中间，我想效果会是这样的：

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

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

所以基本上你呈现任何颜色的文字，黑色取得效果。 然后，您将彩色图像覆盖在文字上，覆盖所有画布，并指定globalCompositeOperation = 'source-atop'

之后，您将在白色背景上显示彩色文字。 现在画一个黑色的背景作为画布，但指定globalCompositeOperation = 'destination-over'

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