如何在 angular 8 中修改畫布上fabric.js 背景圖像的圖像選項

Question

我正在使用 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  
    });

Answer 1

您需要設置圖像對象的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>