移动时在图像后面添加图像

Question

我正在使用具有可切换背景的fabricjs 1.7.22以及在所述背景图像后面添加图像的功能。我有它几乎按照我的意愿工作，但我的问题是当我从计算机上移动一张图像后面的帧图像时，它不会留在第一个画布的框架后面。但是，它在静态画布中应该正常工作。我究竟做错了什么？

我设置canvas.preserveObjectStacking = true;，所以很困惑。

请参阅下面的我的代码段，选择一张图片，然后从您的计算机上传图片以查看是否复制了我的问题。

var canvas = [],
  image;
canvas.push(new fabric.Canvas('c0'));
for (i = 1; i <= 7; i++) {
  canvas.push(new fabric.StaticCanvas('sc' + i));
}

canvas.preserveObjectStacking = true;

function dropText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  canvas[0].add(text);
}

canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);

function onModified(option) {
  var ob = option.target;
  var index = canvas[0].getObjects().indexOf(ob);
  ob.clone(function(obj) {
    for (i = 1; i <= 7; i++) {
      canvas[i].insertAt(obj, index, true);
    }
  });
};


// New Photo to Canvas
document.getElementById('addimg').onchange = function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function () {
      var image = new fabric.Image(imgObj);
      image.set({
        left: 10,
        top: 10,
      }).scaleToHeight(100);
      canvas[0].add(image);
      canvas[0].sendToBack(image);
      updateCanvas();
    };
  };
  reader.readAsDataURL(e.target.files[0]);
};

$('#update').click(function() {
  updateCanvas();
});

function updateCanvas() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
}
// Toggling Images
function replaceImage(imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  image.setSrc(imgUrl, function() {
    canvas[0].renderAll();
    updateCanvas();
  });
}

// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
  isImageLoaded = true;
  image = img.set({
    selectable: false,
    evented: false,
  }).scale(0.5);
  canvas[0].add(image);
  canvas[0].sendToBack(image);
  updateCanvas();
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#addimg {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

input {
	position: absolute;
	font-size: 50px;
	opacity: 0;
	right: 0;
	top: 0;
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>

<button onclick="dropText();" class="dropdown-item">Add Text</button>

<a id="addimg" class="dropdown-item">
                <input type="file" name="file" />Add Image</a>

<button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/RuZ5HTH.png')">Image A Pic</button>
<button onclick="replaceImage('https://i.imgur.com/u3Knj4R.png')">Image B Pic</button>

<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sc4" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc5" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc6" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc7" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
  </table>

</div>

Answer 1

您需要在每个画布上添加preserveObjectStacking:true，因为您要对数组实现preserveObjectStacking:true而不是画布。

var canvas = [],
  image;

canvas.push(new fabric.Canvas('c0',{preserveObjectStacking:true}));
for (i = 1; i <= 7; i++) {
  canvas.push(new fabric.StaticCanvas('sc' + i,{preserveObjectStacking:true}));
}

canvas.preserveObjectStacking = true;

function dropText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  canvas[0].add(text);
}

canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);

function onModified(option) {
  var ob = option.target;
  var index = canvas[0].getObjects().indexOf(ob);
  ob.clone(function(obj) {
    for (i = 1; i <= 7; i++) {
      canvas[i].insertAt(obj, index, true);
    }
  });
};


// New Photo to Canvas
document.getElementById('addimg').onchange = function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function () {
      var image = new fabric.Image(imgObj);
      image.set({
        left: 10,
        top: 10,
      }).scaleToHeight(100);
      canvas[0].add(image);
      canvas[0].sendToBack(image);
      updateCanvas();
    };
  };
  reader.readAsDataURL(e.target.files[0]);
};

$('#update').click(function() {
  updateCanvas();
});

function updateCanvas() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
}
// Toggling Images
function replaceImage(imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  image.setSrc(imgUrl, function() {
    canvas[0].renderAll();
    updateCanvas();
  });
}

// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
  isImageLoaded = true;
  image = img.set({
    selectable: false,
    evented: false,
  }).scale(0.5);
  canvas[0].add(image);
  canvas[0].sendToBack(image);
  updateCanvas();
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#addimg {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

input {
	position: absolute;
	font-size: 50px;
	opacity: 0;
	right: 0;
	top: 0;
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>

<button onclick="dropText();" class="dropdown-item">Add Text</button>

<a id="addimg" class="dropdown-item">
                <input type="file" name="file" />Add Image</a>

<button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/RuZ5HTH.png')">Image A Pic</button>
<button onclick="replaceImage('https://i.imgur.com/u3Knj4R.png')">Image B Pic</button>

<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sc4" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc5" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc6" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc7" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
  </table>

</div>