Fabric.js 캔버스의 텍스트 객체에 배경 이미지를 설정하는 방법

Question

패브릭 캔버스의 패브릭 텍스트 객체에 배경 이미지를 추가하는 방법은 많이 찾았지만 해결책을 찾지 못했습니다.

심판 : http://fabricjs.com/docs/

Answer 1

당신은 그것을 달성하기 위해 텍스트 객체의 채우기 속성으로 직물의 패턴 객체를 사용하여 설정해야합니다. 이에

var text = new fabric.Text('Your Text', { 
    fontSize: 250, 
    left: 50, 
    top: 0, 
    lineHeight: 1, 
    originX: 'left', 
    fontFamily: 'Helvetica', 
    fontWeight: 'bold' 
    }); 
canvas.add(text); 

function textBackground(url) { 
    fabric.util.loadImage(url, function(img) { 
     text.fill = new fabric.Pattern({ 
     source: img, 
     repeat: 'repeat' // repeat, repeat-x, repeat-y or no-repeat 
     }); 
     canvas.renderAll(); 
    }); 
} 

textBackground('SOMEIMAGE.png'); 

이 fabricjs 사이트에서 데모있다 : 여기

는 그렇게 할 수있는 예제 코드입니다 Patterns Demo