Цвет текста наложения в 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

я получил эту идею, вы можете получить эффект, используя свойство globalCompositeOperation из fabricJs объектов

// 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'

Итак, вы сделаете что-то совершенно другое, но оно будет работать. Может потребоваться настройка и может не соответствовать вашим потребностям. Но он должен показать пример, который вы опубликовали.