Fabric JS 图层，一层带有控件

Question

我有一个三层图像，允许用户将图像放置在两层之间的透明 window 中。一切都按预期工作，除了我可以拖动中间层。我可以使用控件调整大小，但无法将图层拖动到位。

我试过设置canvas.controlsAboveOverlay = true;但是没有效果。

最终结果是我可以使用所有控件在透明 window 中移动图像并调整其大小。

Answer 1

您可以分别为底层和顶层使用 background and overlay 图片。

演示版

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true,
  height: 1500,
  width: 1000,
});
canvas.controlsAboveOverlay = true
fabric.Object.prototype.set({
  transparentCorners: false,
  cornerColor: "rgba(102,153,255,0.5)",
  cornerSize: 12,
  padding: 5
});

fabric.Image.fromURL("http://tfgasjstaging.wpengine.com/wp-content/uploads/2019/04/test.png", (img) => {
  var img1 = img.scale(1).set({
    left: 0,
    top: 0,
    selectable: false,
    hasControls: false
  });
  img1.scaleToWidth(canvas.getWidth());
  canvas.centerObject(img1);
  canvas.setBackgroundImage(img1, function() {
    canvas.renderAll()
  });
  fabric.Image.fromURL(img01URL, (img) => {
    var img2 = img.scale(1).set({
      left: 0,
      top: 0,
      selectable: true,
      hasControls: true
    }).scaleToHeight(300);

    img2.applyFilters();
    canvas.add(img2);
    canvas.centerObject(img2);
    img2.setCoords();
    canvas.setActiveObject(img2);

    fabric.Image.fromURL("http://tfgasjstaging.wpengine.com/wp-content/uploads/2019/04/mask.png", (img) => {
      var img3 = img.scale(1).set({
        left: 0,
        top: 0,
        selectable: false,
        hasControls: false
      })
      img3.applyFilters();
      canvas.centerObject(img3);
      canvas.setOverlayImage(img3, function() {
        canvas.renderAll()
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

Fabric JS 图层，一层带有控件

Fabric JS Layers with one layer with controls

canvas

html5-canvas

fabricjs