织物js设置背景组图像和文本

时间:2017-06-28 10:38:53

标签: html canvas background-image fabricjs

是否可以在画布背景中添加文本和图像?像这样

图片和单词'在此处拖动照片'

enter image description here

1 个答案:

答案 0 :(得分:0)

是!

这是可能的,以及如何实现这一目标......



var canvas = new fabric.Canvas('c');

var text = new fabric.Text('DRAG PHOTO HERE', {
   top: 100,
   left: 100,
   fontSize: 14,
   fontFamily: 'Arial',
   originX: 'center',
   originY: 'center'
});

fabric.Image.fromURL('https://i.imgur.com/LKaEHRo.jpg', function(img) {
   img.setWidth(200);
   img.setHeight(200);
   var group = new fabric.Group([img, text]);
   canvas.setBackgroundImage(group);
   canvas.renderAll();
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>
&#13;
&#13;
&#13;