如何在移动另一张图片时将一张图片保持在其后面？

Question

如何在移动另一张图片时将一张图片保持在其后面？

4

编辑：这里我能够在选中图像时将其保留在后面，但出现了无法拖动的问题。我做错了什么？

我可以从计算机上传图像，然后移动图像。我的问题: 当我选择图像时，它会弹到前面，直到我取消选择。是否可能使其保持在我上传的图像后面的图像后面？请查看此JSFiddle的问题。您会注意到，如果上传图像，则图像会在框架上方弹出，但我希望在移动它时将其保留在其后面，但仍然可以看到控件。

提前感谢！

var canvas = new fabric.Canvas('c');
var oImg, oImg2, isImageLoaded;

//initialize default frame (light brown wood oval)
fabric.Image.fromURL('https://i.imgur.com/DrzSWSa.png', function(img) {
  isImageLoaded = true;
  oImg = img.set({
    selectable: false,
  }).scale(0.5);
  canvas.add(oImg).renderAll();
  canvas.sendToBack(oImg);
});

//initialize some text
canvas.add(new fabric.IText('Some Text', {
  left: 475,
  top: 25,
  fontFamily: 'Monsieur La Doulaise',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

//initialize Some More Text
canvas.add(new fabric.IText('Some More Text', {
  left: 475,
  top: 60,
  fontFamily: 'cinzel',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,
}));

//oImgObj bread and butter, kudos @grunt
function replaceImage(oImgObj, imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  var imgElem = oImgObj._element; //reference to actual image element
  imgElem.src = imgUrl; //set image source
  imgElem.onload = () => canvas.renderAll(); //render on image load
}

// Download canvas as image
$("#d").click(function() {
  $("#c").get(0).toBlob(function(blob) {
    saveAs(blob, "memorialportrait.jpg");
  });
});

// Upload an image to the canvas
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 400,
        top: 102
      }).scale(.8);
      canvas.add(oImg);
      canvas.setActiveObject(oImg);
      var image = canvas.getActiveObject();
      image.moveTo(-1);
      canvas.discardActiveObject();
      canvas.renderAll();
      canvas.sendToBack(oImg);
    });
  };
  reader.readAsDataURL(file);
});

//fonts
document.getElementById('cinzel').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "cinzel");
  canvas.renderAll();
});
document.getElementById('monsieurladoulaise').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "Monsieur La Doulaise");
  canvas.renderAll();
});
document.getElementById('tangerine').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "tangerine");
  canvas.renderAll();
});

// Upload link
$(function() {
  $("#upload_link").on('click', function(e) {
    e.preventDefault();
    $("#file:hidden").trigger('click');
  });
});

a.dropdown-item {
  cursor: pointer;
}

.btn {
  margin-top: 10px;
  cursor: pointer;
}

canvas {
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin: 10px 0px 0px 12px;
  cursor: pointer;
}


/* Styling the upload link */

#upload_link {
  text-decoration: none;
}

#file {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <button type="file" class="btn btn-dark btn-sm" id="upload_link">New Photo</button>
      <br>
      <input type="file" id="file" /><a href="" id="upload_link" hidden>Add Photo</a>
      <div class="btn-group">
        <button class="btn btn-dark btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose your...</button>
        <div class="dropdown-menu">
          <!-- <h6 class="dropdown-header">Theme</h6>
            <a onclick="replaceImage(oImg2, 'images/themes/none.png')" class="dropdown-item">None</a>
            <a onclick="replaceImage(oImg2, 'images/themes/beach.png')" class="dropdown-item">Beach</a>
            <div class="dropdown-divider"></div> -->
          <h6 class="dropdown-header">Frame</h6>
          <a onclick="replaceImage(oImg, 'images/frames/LightBrownWoodOval.png')" class="dropdown-item">Oval Light Brown</a>
          <a onclick="replaceImage(oImg, 'images/frames/MidToneWoodFrameOval.png')" class="dropdown-item">Oval Mid Tone Wood</a>
          <a onclick="replaceImage(oImg, 'images/frames/SilverFrameOval.png')" class="dropdown-item">Oval Silver</a>
          <a onclick="replaceImage(oImg, 'images/frames/DistressedWhiteFrameRec.png')" class="dropdown-item">Rectangle Distressed White</a>
          <a onclick="replaceImage(oImg, 'images/frames/GoldScrollFrameRec.png')" class="dropdown-item">Rectangle Gold Scroll</a>
          <a onclick="replaceImage(oImg, 'images/frames/MidtoneWoodFrameRec.png')" class="dropdown-item">Rectangle Mid Tone Wood</a>
          <a onclick="replaceImage(oImg, 'images/frames/SilverFrameRec.png')" class="dropdown-item">Rectangle Silver</a>
          <div class="dropdown-divider"></div>
          <h6 class="dropdown-header">Font</h6>
          <a class="dropdown-item" id="cinzel" style="font-family:cinzel;">Cinzel</a>
          <a class="dropdown-item" id="monsieurladoulaise" style="font-family:Monsieur La Doulaise;">Monsieur La Doulaise</a>
          <a class="dropdown-item" id="tangerine" style="font-family:tangerine;">Tangerine</a>
        </div>
      </div>

      <button id="d" type="button" class="btn btn-dark btn-sm">Download</button>
      <br>
      <button onclick="window.location.reload(true)" type="button" class="btn btn-danger btn-sm">Restart</button>
      <br>

      <!-- <div class="btn-group">
          <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</button>
          <div class="dropdown-menu">
            <a class="dropdown-item">Print</a>
            <div class="dropdown-divider"></div>
            <h6 class="dropdown-header">Advanced</h6>
            <a class="dropdown-item disabled">Export to SVG</a>
          </div>
        </div> -->
    </div>

    <div class="col-md-10">
      <canvas id="c" width="637" height="412"></canvas>

    </div>
  </div>
</div>
<!-- Our JS -->
<script src="scripts/memorial-portrait-creator.js"></script>
<!-- Optional JavaScript. jQuery first, then Popper.js, then Bootstrap JS -->

- anonymoose

1

你必须使用CSS的"z-index"属性。 - Sudarshan Tanwar

你能详细说明一下吗？ - anonymoose

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AndreaBogazzi · Accepted Answer

在使用fabricjs之前，需要先阅读文档中的一些基础知识。

http://fabricjs.com/docs/

1) 选定的对象会跳到顶部，但是你可以在画布上设置preserveObjectStacking: true来禁用它。

2) 如果你需要一个图像始终保持在顶部，可以使用canvas.overlayImage = fabric.Image，这将为你提供一个顶部图像，不会对选择做出反应，你可以使用它来遮盖其他对象。