[英]how to modified the image options for fabric.js background image on the canvas in angular 8
I am using fabric.js library to set an image background but can not get references我正在使用 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'
});
I am using this function but there is not a property for canvas.width while I get a canvas.getWidth() but it is not working like this .. as well as this is also not working with my case :(我正在使用这个函数,但是当我得到一个 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
});
You need to set opacity and scale
of image object instead of backgroundImageOpacity, backgroundImageStretch
.您需要设置图像对象的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.