5

当我在画布上绘制一些对象时，有时新对象会放在旧对象之下。例如，我在画布上添加一些图像，然后画一条线。当我运行代码时，图像是最重要的。我在网上搜索解决方案。但是没有一个直接的解决方案。:( 在某些情况下，它被视为一个错误！在资源管理器中。如何控制 z-index？

编辑：这是我的代码

<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>
4

3 回答 3

9

您很可能在绘制图像之前等待图像加载。

此外，您可能会尽快画线。

您需要等待所有图像加载，然后按您想要的顺序绘制所有内容（从最远的 z 顺序到最近）。在加载所有图像之前不要绘制任何东西，否则您的 z 顺序将不正确。

如果要在加载所有图像之前在屏幕上显示项目，则必须在每次图像加载时重绘所有内容，而不仅仅是绘制那张图像。

这是一个示例，我在其中绘制了 3 个对象：一个圆圈、一个图像和一个窗口。无论图像是否加载，我都会立即绘制它们，但是一旦加载图像，我就会再次绘制它们，以确保图像正确位于其他两个对象之间：

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

速记相关代码（以防 jsfiddle 出现故障）是：

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 函数中，或者创建自己的绘图函数来加载所有内容。例如：

<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();
}

于 2013-01-10T16:35:53.657 回答
1

Canvas 没有任何“z-index”的概念。画布中没有对象 - 画布只是位图，只是像素。

您确定您是在画布上绘制线条和图像，而不仅仅是创建新元素（如 img 元素？）。

如果是，请检查调用诸如填充（）和描边（）之类的绘图方法的顺序。直到你这样做（无论你在哪里有你的 moveTo 和 lineTo 调用），形状才真正被绘制出来。

于 2013-01-10T07:02:45.837 回答
1

我一直在使用 fabric.js，它有一些你可能会觉得有用的特性。虽然本身不​​是 z-index，但它可以设置背景或覆盖 - 下面是http://fabricjs.com/customization/上的示例

var canvas = new fabric.Canvas('c13'); canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas)); this.__canvases.push(canvas);

于 2014-07-21T16:29:08.130 回答