无法获取叠加层以调整大小 fabric.js？

Question

我已经能够让 canvas 调整大小，还包括触摸事件。但出于某种原因，我无法让叠加图像填充 canvas.

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    width: width,
    height: height,
    // Needed to position overlayImage at 0/0
    originX: 'left',
    originY: 'top'
  });

我的 Fiddle 有一些代码，因为我不确定是否是缩放器或触摸事件导致了这个问题。

Answer 1

您 fiddle 中的问题源于以下事实：在 Fabric.js 中，设置 width 和 height 不会将图像缩放到给定值，而是设置 fabric.Image 容器的尺寸。您需要做的是在 setOverlayImage() 的回调中调用 canvas.overlayImage.scaleToWidth(width)（或 .scaleToHeight(height)），这样图像就会实际缩放以覆盖整个 canvas:

//Image Edit
var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true
});

canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerWidth);
fabric.Image.fromURL("https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg", function(img) {
  img.scale(0.5).set({
    left: 150,
    top: 150,
    angle: 0
  });
  canvas.add(img).setActiveObject(img);
});

var info = document.getElementById('info');




function resize() {
  var canvasSizer = document.getElementById("imageEditor");
  var canvasScaleFactor = canvasSizer.offsetWidth / 525;
  var width = canvasSizer.offsetWidth;
  var height = canvasSizer.offsetHeight;
  var ratio = canvas.getWidth() / canvas.getHeight();
  if ((width / height) > ratio) {
    width = height * ratio;
  } else {
    height = width / ratio;
  }
  var scale = width / canvas.getWidth();
  var zoom = canvas.getZoom();
  zoom *= scale;
  canvas.setDimensions({
    width: width,
    height: height
  });
  canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0])
  canvas.setOverlayImage('https://i.imgur.com/1CURvP5.png', function() {
    canvas.overlayImage && canvas.overlayImage.scaleToWidth(width)
    canvas.renderAll()
  }, {
    // Needed to position overlayImage at 0/0
    originX: 'left',
    originY: 'top'
  });
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);

var textObj = new fabric.IText("Test Text", {
  fontSize: 22,
  top: 362.5,
  left: 262.5,
  hasControls: true,
  fontWeight: 'bold',
  fontFamily: 'Montserrat',
  fontStyle: 'normal',
  centeredrotation: true,
  originX: 'center',
  originY: 'center'
});
canvas.add(textObj);
canvas.renderAll();

canvas.on({
  'touch:gesture': function() {
    var text = document.createTextNode(' Gesture ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:drag': function() {
    var text = document.createTextNode(' Dragging ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:orientation': function() {
    var text = document.createTextNode(' Orientation ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:shake': function() {
    var text = document.createTextNode(' Shaking ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:longpress': function() {
    var text = document.createTextNode(' Longpress ');
    info.insertBefore(text, info.firstChild);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.js"></script>


<div id="imageEditor">
  <div class="canvas-container">
    <canvas id="c"></canvas>
  </div>
</div>

（我不得不在别处重新上传jail_cell_bars.png图片，因为原始主机不合作）

无法获取叠加层以调整大小 fabric.js？

Can't get overlay to resize fabric.js?

html

javascript

canvas

fabricjs