Fabric JS Layers с одним слоем с элементами управления - PullRequest
Новая
       40

Fabric JS Layers с одним слоем с элементами управления

1 голос
/ 18 апреля 2019

У меня есть трехслойное изображение, чтобы пользователь мог поместить изображение в прозрачное окно между двумя слоями. Все работает как положено, за исключением того, что я могу перетащить средний слой. Я могу изменить размер, используя элементы управления, но не могу перетащить слой в нужное положение.

Я пытался установить canvas.controlsAboveOverlay = true;, но это не имеет никакого эффекта.

http://jsfiddle.net/53p2ym7c/1/

Конечным результатом будет то, что я могу переместить и изменить размер изображения в прозрачном окне, используя все элементы управления.

1 Ответ

1 голос
/ 18 апреля 2019

Вы можете использовать background и overlay image для нижнего и верхнего слоя соответственно.

DEMO 

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>
...