如何在 angular 中的 canvas 上修改 fabric.js 背景图像的图像选项 8

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.width 没有属性虽然我得到一个 canvas.getWidth() 但它不是这样工作的..而且这也不适用于我的情况:(

 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>

如何在 angular 中的 canvas 上修改 fabric.js 背景图像的图像选项 8

how to modified the image options for fabric.js background image on the canvas in angular 8

javascript

canvas

fabricjs

typescript

angular