移动时如何将图像保留在另一个图像后面？ [英] How to keep image behind another image when moved?
本文介绍了移动时如何将图像保留在另一个图像后面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
编辑：此处我可以在选中时将其保留在后面，但对于某些人来说因为它现在不可拖动。我可能做错了什么？
Here I'm able to keep it in the back while selected but for some reason it's not dragable now. What might I be doing wrong?
我可以从计算机上传图像，然后移动图像。 我的问题：当我选择图像时，它会向前弹出，直到我取消选择它。是否有可能让它保留在我上传的图像背后？ 请参阅此问题的JSFiddle 。您会注意到，如果您上传图像，图像会在框架上方向前弹出 - 我希望它在移动时保留在它后面，但仍然会看到控件。
I have the ability to upload an image from my computer and then to move the image around. My problem: When I select the image, it pops forward until I deselect it. Is it possible to have it remain BEHIND the image that I have it upload behind? Please see this JSFiddle of the problem. You'll notice that if you upload an image, the image pops forward above the frame—I want it to remain behind it when I move it, but still see the controls.
提前致谢！
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 -->
推荐答案
在开始使用文档中的fabricjs之前，有一些基本的阅读要做。
There are some basic reading to do before starting to work with fabricjs in the docs.
1）所选对象跳到顶部但你可以在画布上设置 preserveObjectStacking：true 。
1) the selected object jumps on top but you can disable it setting preserveObjectStacking: true on the canvas.
2）如果你需要一个要始终保持最佳状态，请使用 canvas.overlayImage = fabric.Image 这将为您提供一个顶部图像，该图像不会对可用于屏蔽其他对象的选择做出反应
2) if you need an image to stay always on top, use canvas.overlayImage = fabric.Image this will give you a top image that do not react to selection that you can use to mask other objects
这篇关于移动时如何将图像保留在另一个图像后面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
