canvas - 如何使图像捕捉到任何“轮廓”图像（使用“海滩上的动物”演示）

Question

我是 Konvasjs 的新手，也是 canvas 的新手，我一直在尝试制作一个类似于演示“海滩上的动物”的游戏在演示中捕捉到他们的特定轮廓我希望动物能够捕捉到任何轮廓，这样玩家就可以得到错误的答案，或者得到更少的分数。

对不起，如果我问的是很多东西。

Answer 1

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

我创建了一个函数来获取对象（代码）和区域（大纲）：

    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 key in codes) {} 和拖动事件之外创建。然后我在 dragend 事件中调用了该函数。

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

添加分数有一点问题，我找到了一个解决方案，除了保留 if 语句以将正确的对象轮廓组合更改为可拖动为 false 之外，就好像它取出用户可以“耕种”点的拖动功能...