如何保持的z-index在画布上通过选择框

我建立一个牌桌上制造商，工作原理如下更新图像时：如何保持的z-index在画布上通过选择框

页面加载后，我打开一个牌桌上一个的部件逐之一。
最终用户通过选择框选择他们的扑克桌上想要什么类型的毛毡，扶手，身体或杯托。
当在选择框中检测到更改时，Image对象的src属性也会更改。例如：如果用户想要黑色感觉，我正在加载图像：felts/black.png;那么，如果他决定，它看起来胜于蓝，页面加载图像毛毡/ blue.png

我的问题是这样的：

只要他们改变了牌桌上的一个组成部分，该新图像自动加载到其余的顶部。

例如：如果我改变毛毡颜色，则毛毡的图像将位于扶手图像的顶部。

我想知道如何强制感觉图像保持其Z指数的东西。

这里是我的代码：

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

任何帮助将非常感谢！如果我想更改

来源

2013-04-25 ILikeTacos

您可以使用数组来确定应使用特定顺序（Body first，然后是Armrest ...）重新加载哪个图像。我不认为在画布上有任何像z-index的东西 – RelevantUsername 2013-04-25 12:14:49

我注意到如果我遵循，请您详细说明一下吗？ – ILikeTacos 2013-04-25 12:21:57

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

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

来源

2013-04-25 12:11:50 devnull69

无赖！我不知道。我将检查这些框架，但我的猜测是，对于我的工具的范围，它们可能不值得麻烦。谢谢一堆！ – ILikeTacos 2013-04-25 12:21:35

如何保持的z-index在画布上通过选择框

回答

相关问题