Question

我正在建立一个扑克桌制造商，其工作原理如下：

当页面加载时，我逐个加载扑克桌的组件。
最终用户通过选择框选择在扑克桌上想要的毛毡，扶手，身体或杯架。
当在选择框中检测到更改时，Image对象的src属性也会更改。例如：如果用户想要黑色毛毡，我正在加载图片：felts / black.png;然后，如果他决定蓝色看起来更好，页面加载图像felts / 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

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

Answer 1

不幸的是，无法在画布上维护已绘制对象的z-index。您所能做的就是删除所有内容并正确重绘。

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

通过选择框更新图像时如何在画布中保留z-index

1 个答案: