[英]Multiple images/layers on Canvas
I have a canvas that I add a background image to from my source in the Html, I then insert images from my local computer and add text to the image, I am able to move/rotate image and text no problem. 我有一个画布,可以从Html的源中向其中添加背景图像,然后从本地计算机中插入图像并将文本添加到图像中,就可以移动/旋转图像和文本了。 I wish to have the ability to move the uploaded image and text to back and to front of the background image, I cannot find a solution, I think it involves Multiple Canvas layers or something of the sort. 我希望能够将上载的图像和文本前后移动到背景图像的前面和后面,但我找不到解决方案,我认为它涉及多个Canvas图层或类似的图层。 Please can someone suggest a way to do this? 请有人可以建议一种方法吗?
<div class="well" style="height:350px;">
<a name="1"><center>Sonstiges</center></a>
<div class="cleaner_h3"></div>
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son01r.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son02r.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son09.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son04p.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son05p.png">
</div>
Jquery portion where I add the background image
$(".img-polaroid").click(function(e){
var el = e.target;
var design = $(this).attr("src"); //src is the particular image you click on
$('#tcanvas').css({
'backgroundImage': 'url(' + design +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center',
'background-size': '100% 100%'
});
});
Canvas element
<div id="phoneDiv" class="page" style="width: 800px; height: 800px; position: relative;left:5%; background-color: rgb(255, 255, 255);">
<canvas id="tcanvas" width=800 height="800" class="hover" style="-webkit-user-select: none;"></canvas>
</div>
Problem: 问题:
You have an existing image on the canvas and you want to draw another image behind the existing image . 您在画布上有一个现有图像,并且想要在现有图像后面绘制另一个图像 。
You can use context.globalCompositeOperation="destination-over" to cause subsequent drawing to be drawn "under" the existing content. 您可以使用context.globalCompositeOperation =“ destination-over”来将后续图形绘制在现有内容的“下方”。
What happens is that any existing non-transparent pixels on the canvas will remain and the new image is drawn only into the transparent pixels. 发生的情况是,画布上所有现有的非透明像素都将保留,而新图像仅被绘制到透明像素中。
So draw this wall-frame with transparent pixels inside the frame: 因此,请使用以下透明像素绘制此墙框架:
context.drawImage(backgroundImage,0,0);
Then set compositing to "destination-over" 然后将合成设置为“目标结束”
(any new drawing will display only where the existing wall-frame is transparent ). (任何新图形将仅在现有墙框架是透明的地方显示)。
context.globalCompositeOperation="destination-over";
Then draw a second image: 然后绘制第二个图像:
The city will be "drawn behind" the existing image (thanks to compositing): 该城市将被“绘制”在现有图像的后面(由于合成):
context.drawImage(cityImage,0,0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.