我正在使用fabric.js库设置图像背景,但无法获取参考
canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png',
canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height,
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
我正在使用此函数,但是当我获取canvas.getWidth()时没有canvas.width的属性,但是它不能像这样工作..以及也不能与我的情况一起工作:(
canvas.setBackgroundImage('images/download.jpg', canvas.renderAll.bind(canvas),
{
backgroundImageOpacity: 0.5,
backgroundImageStretch: true
// above both option are not valid with my case
});
您需要设置opacity and scale
图片对象而不是backgroundImageOpacity, backgroundImageStretch
。
var canvas = window._canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://picsum.photos/200/300', (img) => {
img.set({
opacity: 0.5,
scaleX: canvas.width/img.width,
scaleY: canvas.height/img.height,
});
canvas.setBackgroundImage(img, canvas.requestRenderAll.bind(canvas));
});
canvas {
border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句