如何控制画布对象的z-index？ [英] How can I control z-index of canvas objects?

问题描述

当我在画布上绘制一些对象时，有时新对象放置在旧对象下面。例如，我添加一些图像到画布，然后画一条线。当我运行的代码图像是行的顶部。我搜索web解决方案。但是没有一个直接的解决方案。

When I draw some objects in canvas, sometimes new objects places under old ones. For example, I add some images to canvas and then draw a line. when I run code images are top of the line. I searched web for a solution. But there was not an straight-forward solution. :( In some cases, it have seen as a bug! in explorers. How can I control z-index?

编辑：这是我的代码

this is my code

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
ctx.drawImage(img, 10, 10, 32, 32);
}
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
</script>

推荐答案

您最有可能在绘制图片之前等待图片加载。

You are most likely waiting for images to load before drawing them.

此外，您可能会尽快绘制线条。

Additionally, you are probably drawing lines as soon as you can.

您需要等待所有图片加载，然后按照您想要的顺序（从最远的z顺序到最接近的顺序）绘制一切。

You need to wait for all images to load, then draw everything in the order you want (from farthest z-order to closest). Do not draw anything until all images have been loaded, or your z-order will not be correct.

如果您要在所有图片上显示项目，请勿绘制任何在加载所有图片之前的屏幕，您必须在每个图片加载时重绘所有，而不只是绘制一个图片。

If you want to show items on the screen before all images are loaded, you must redraw everything on each image load, not just draw that one image.

其中我画了3个对象：一个圆圈，一个图像和一个窗口。无论是否加载图片，我都会立即绘制图片，但是一旦图片加载完毕，我会再次绘制图片，以确保图片正确地位于其他两个对象之间：

Here's an example, where I draw 3 objects: A circle, an image, and a window. I draw them immediately, whether the image is loaded or not, but I draw all of them again once the image is loaded to ensure that the image is correctly in between the other two objects:

http://jsfiddle.net/U5bXf/32/

速记相关代码（在jsfiddle失败的情况下）是：

The shorthand relevant code (in case jsfiddle goes down) is:

var img = new Image()
img.onload = function() {
  draw()
};
img.src = "http://placekitten.com/100/140";

draw();

function draw() {
// object one

// Now we'll draw the image in between, if its loaded
ctx.drawImage(img, 100, 30);

// object two
}

---

此行下面的代码是对注释的回复

你已经发布代码，但你会注意到，在 onload 函数中绘制图像。

onload函数通常在其他绘图命令（除非页面已经加载，那么它可以是）。您需要将所有绘图代码移动到onload函数中，或者使您自己的绘图函数加载所有内容。例如：

The onload function usually happens after the other drawing commands (unless the page is already loaded, then it could be either). You need to move all drawing code into the onload function or else make your own drawing function that loads everything. For example:

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
  // assuming we want the image drawn before the line:
  ctx.drawImage(img, 10, 10, 32, 32);

  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.stroke();
}

这篇关于如何控制画布对象的z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！