0

我正在构建一个扑克桌制造商，其工作方式如下：

  1. 当页面加载时，我一个一个地加载扑克桌的组件。
  2. 最终用户通过选择框在他们的扑克桌上选择需要什么样的毛毡、扶手、身体或杯托。
  3. 当在选择框中检测到更改时，Image 对象的 src 属性也会更改。例如：如果用户想要黑色毛毡，我正在加载图像：felts/black.png；然后如果他认为蓝色看起来更好，则页面加载图像毡/blue.png

我的问题如下：

一旦他们更改了扑克桌的一个元素，新图像就会自动加载到其余元素之上。

例如：如果我改变毛毡的颜色，毛毡的图像会出现在扶手的图像之上。

我想知道如何强制毛毡图像保持其 z-index 之类的东西。

这是我的代码：

 var tableBody = new Image();
 tableBody.onload = function() {
  context.drawImage(tableBody, 0, 0);
 };

 tableBody.src = "http://www.mcptables.com/images/buildyourtable/body/autumn-oak.png";

 /* and it does the same thing for the other parts of the poker table... tableArmrest, tableFelt
    tableCupholders, etc... */

 $('#armrest').change(
function() {
    switch( $(this).val() ) {
        case "black":
                tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/black.png";
        break;
        case "brown":
                tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/wood.png";
    }
}
)

您可以在以下页面上看到它的实际效果：

http://mcptables.com/buildyourtable.html

这是我的 JS 代码的链接：

http://mcptables.com/js/pokertablebuilder.js

任何帮助将不胜感激！如果我想改变

4

1 回答 1

2

不幸的是，没有办法维护画布上已绘制对象的 z-index。您所能做的就是删除所有内容并适当地重绘。

有画布框架可以解决这个问题，并为开发人员提供画布上单独对象的“印象”。参见 processing.js、raphael、kineticjs 等

于 2013-04-25T12:11:50.713 回答