如何使图像捕捉到任何“轮廓”图像(使用“海滩上的动物”演示)

时间:2016-04-20 13:32:51

标签: canvas drag-and-drop html5-canvas konvajs

我是Konvasjs的新手,也是画布的新手,我一直在尝试制作类似于演示“海滩上的动物”的游戏。我想保持这个部分,如果它在正确的轮廓中得分增加,而是演示中的动物捕捉到它们的特定轮廓我想让动物捕捉到任何轮廓,这样玩家就可以得到错误的答案,或者得分较低。

对不起,如果我问的其实是很多东西。

1 个答案:

答案 0 :(得分:0)

我找到了另一种解决方案,这可能不会自动允许拖动对象捕捉到每个捕捉区域,但它确实允许您使用较少的代码来控制它。

我创建了一个函数来获取对象(代码)和区域(大纲):

    function snapTo(code, outlineSnap) {
        var outline = outlines[outlineSnap + '_black'];
        if(isNearOutline(code, outline)) {
            code.position({
                x : outline.x,
                y : outline.y
            });

        console.log("privKey:"+ privKey);
        console.log("Key:"+ key);
        console.log(code.id());
        codeLayer.draw();
        var testKey = privKey+ "_black";


        if(code.id() == outlineSnap) {
            setTimeout(function() {
                code.draggable(false);
            }, 50);
        }
    }
}

此函数必须在拖动事件之外创建for(代码中的var键){}。然后我在dragend事件中调用了函数。

code.on('dragend', function() {
    snapTo(code, "pstart");
    snapTo(code, "pend");
}

在添加分数时遇到了一些问题,我找到了一个解决方案,除了保持if语句在正确的对象轮廓组合中将draggable更改为false之外,就像它取出了用户可以“耕种”#39;点的拖动功能......