移动时如何将图像保留在另一个图像后面？

Question

编辑:这里我可以在选中的同时将它保持在后面,但由于某种原因它现在不能拖动.我可能做错了什么？

---

我可以从计算机上传图像,然后移动图像.我的问题:当我选择图像时,它会向前弹出,直到我取消选择它.是否有可能让它保留在我上传的图像背后？请看这个问题的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 -->

Answer 1

在开始使用docs中的fabricjs之前,有一些基本的阅读要做.

http://fabricjs.com/docs/

1)所选对象跳到顶部,但您可以preserveObjectStacking: true在画布上禁用它.

2)如果你需要一个图像始终保持在顶部,使用canvas.overlayImage = fabric.Image它会给你一个顶部图像,不会对你可以用来掩盖其他对象的选择作出反应