如何使图像与任何 "outline" 图像对齐（使用 "animals on the beach" 演示）

Question

我是 Konvasjs 的新手，也是 canvas 的新手，我一直在尝试制作类似于演示的游戏 "animals on the beach" 如果轮廓正确，我想保留该部分分数增加了，但我希望动物能够捕捉到任何轮廓，而不是演示中的动物捕捉到它们的特定轮廓，这样玩家就可以得到错误的答案，或者得到更少得分.

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

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 语句以将正确的对象轮廓组合的 draggable 更改为 false 之外，就好像它把用户带走了可以'farm'点的拖动功能...

如何使图像与任何 "outline" 图像对齐（使用 "animals on the beach" 演示）

How to make images snap to any "outline" image (using "animals on the beach" demo)

drag-and-drop

canvas

html5-canvas

konvajs