Question

我正在尝试制作一个展示部分大小的互动式平板游戏。我最近遇到了Kineticjs能够在画布上拖动图像。我默认隐藏了图像，但是当我添加一个选择器来显示图像时，它会显示所有图像。我把它设置在html中使用id来在javascript中调用'show'。

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/

为每个list-item指定一个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"));
});

Kineticjs显示基于id标签的图像

1 个答案: