Kineticjs 基于 id 标签显示图像

Question

我正在尝试制作一个展示份量大小的交互式盘子游戏。我最近发现 Kineticjs 能够在画布上拖动图像。我已经在默认情况下隐藏图像的位置设置了它，但是当我添加选择器来显示图像时，它将显示所有图像。我将其设置在 html 中使用 id 以在 javascript 中调用“显示”的位置。

1) 我将如何设置它在不使用多个不同功能的情况下使用 html 中的“id”基于文本显示图像？每个 id 是否需要不同的标签，例如“showorange”？

    document.getElementById('show').addEventListener('click', function() {
        orangeImg.show();
        strawberryImg.show();
        layer.draw();
    }, false);

http://jsfiddle.net/m9uq7/

Answer 1

一个演示：http://jsfiddle.net/m1erickson/y53v6/

给每个列表项一个 class="food" 和一个特定于食物名称的 id (id="strawberry)。

<ul>
    <li><a href="#" id="papaya" class="food">papaya</a></li>
    <li><a href="#" id="strawberry" class="food">Strawberry</a></li>
</ul>

这样你就可以让浏览器监听食物类的所有点击

$(".food").click(function(){

    // any item with class="food" was clicked
    // so get the id of the clicked link

    var id=$(this).attr("id");

});

还要为每个 Kinetic.Image 指定一个特定于食物名称的 id

// strawberry
var strawberryImg = new Kinetic.Image({
    id:"strawberry",
    image: images.strawberry,
    x: 200,
    y: 55,
    width: 128,
    height: 128,
    draggable: true,
    stroke: 'orange',
    strokeWidth: 5,
    strokeEnabled: false,
    visible: false
});

这样你可以让 KineticJS 找到与点击的 html 链接同名的图片。

例如，如果单击“草莓”链接，您可以得到 Kinetic 草莓图像，如下所示：

var node=stage.find("#"+$(this).attr("id"));
node.show();
layer.draw();

因此您可以响应点击任何 class="food" 锚点并显示相关图片：

$(".food").click(function(){
    var node=stage.find("#"+$(this).attr("id"));
    node.show();
    layer.draw();
    console.log($(this).attr("id"));
});