Konva中的拖放限制js

时间:2017-04-04 19:29:55

标签: konvajs

我最近开始学习Konva-JS ...请帮帮我:)。

<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    function loadImages(sources, callback) {
        var assetDir = '/assets/';
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
            numImages++;
        }
        for(var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
                if(++loadedImages >= numImages) {
                    callback(images);
                }
            };
            images[src].src = assetDir + sources[src];
        }
    }
    function isNearOutline(animal, outline) {
        var a = animal;
        var o = outline;
        var ax = a.getX();
        var ay = a.getY();
        if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
            return true;
        }
        else {
            return false;
        }
    }
    function drawBackground(background, beachImg, text) {
        var context = background.getContext();
        context.drawImage(beachImg, 0, 0);
        context.setAttr('font', '20pt Calibri');
        context.setAttr('textAlign', 'center');
        context.setAttr('fillStyle', 'white');
        context.fillText(text, background.getStage().getWidth() / 2, 40);
    }
    function initStage(images) {
        var stage = new Konva.Stage({
            container: 'container',
            width: 578,
            height: 530
        });
        var background = new Konva.Layer();
        var animalLayer = new Konva.Layer();
        var animalShapes = [];
        var score = 0;
        // image positions
        var animals = {
            snake: {
                x: 10,
                y: 70
            },
            giraffe: {
                x: 90,
                y: 70
            },
            monkey: {
                x: 275,
                y: 70
            },
            lion: {
                x: 400,
                y: 70
            }
        };
        var outlines = {
            snake_black: {
                x: 275,
                y: 350
            },
            giraffe_black: {
                x: 390,
                y: 250
            },
            monkey_black: {
                x: 300,
                y: 420
            },
            lion_black: {
                x: 100,
                y: 390
            }
        };
        // create draggable animals
        for(var key in animals) {
            // anonymous function to induce scope
            (function() {
                var privKey = key;
                var anim = animals[key];
                var animal = new Konva.Image({
                    image: images[key],
                    x: anim.x,
                    y: anim.y,
                    draggable: true
                });
                animal.on('dragstart', function() {
                    this.moveToTop();
                    animalLayer.draw();
                });
                /*
                       * check if animal is in the right spot and
                       * snap into place if it is
                       */
                animal.on('dragend', function() {
                    var outline = outlines[privKey + '_black'];
                    if(!animal.inRightPlace && isNearOutline(animal, outline)) {
                        animal.position({
                            x : outline.x,
                            y : outline.y
                        });
                        animalLayer.draw();
                        animal.inRightPlace = true;
                        if(++score >= 4) {
                            var text = 'You win! Enjoy your booty!';
                            drawBackground(background, images.beach, text);
                        }
                        // disable drag and drop
                        setTimeout(function() {
                            animal.draggable(false);
                        }, 50);
                    }
                });
                // make animal glow on mouseover
                animal.on('mouseover', function() {
                    animal.image(images[privKey + '_glow']);
                    animalLayer.draw();
                    document.body.style.cursor = 'pointer';
                });
                // return animal on mouseout
                animal.on('mouseout', function() {
                    animal.image(images[privKey]);
                    animalLayer.draw();
                    document.body.style.cursor = 'default';
                });
                animal.on('dragmove', function() {
                    document.body.style.cursor = 'pointer';
                });
                animalLayer.add(animal);
                animalShapes.push(animal);
            })();
        }
        // create animal outlines
        for(var key in outlines) {
            // anonymous function to induce scope
            (function() {
                var imageObj = images[key];
                var out = outlines[key];
                var outline = new Konva.Image({
                    image: imageObj,
                    x: out.x,
                    y: out.y
                });
                animalLayer.add(outline);
            })();
        }
        stage.add(background);
        stage.add(animalLayer);
        drawBackground(background, images.beach, 'Ahoy! Put the animals on the beach!');
    }
    var sources = {
        beach: 'beach.png',
        snake: 'snake.png',
        snake_glow: 'snake-glow.png',
        snake_black: 'snake-black.png',
        lion: 'lion.png',
        lion_glow: 'lion-glow.png',
        lion_black: 'lion-black.png',
        monkey: 'monkey.png',
        monkey_glow: 'monkey-glow.png',
        monkey_black: 'monkey-black.png',
        giraffe: 'giraffe.png',
        giraffe_glow: 'giraffe-glow.png',
        giraffe_black: 'giraffe-black.png'
    };
    loadImages(sources, initStage);
  </script>

正如我们在这个例子Animals_on_the_Beach_Game中所看到的那样,动物的图像是可拖动的,并且可以在任何地方掉落......但我想以它可以放在特定地方的方式改变它... 我能做什么 ? 谢谢你:))

2 个答案:

答案 0 :(得分:0)

这更像是一个设计问题,因为放开鼠标按钮并不是你可以阻止的。保持图像附加到鼠标位置也是不直观的,因为您需要一个新的鼠标事件来关联它。我为拖放UI所做的是(1)破坏掉落的形状,或者如果这不是一个选项,(2)将形状设置回原来(即快速回放)到其原始状态位置。或者,您可以(3)找到最接近的可能有效放置目标并捕捉到该位置。

答案 1 :(得分:0)

首先,您可能已经定义了 lionOrigin

您必须在被拖动对象dragend事件上实现调用,所以我们说狮子。您必须检查狮子相对于最终所需位置的位置,我们将其称为 lionDestiny 。这可以通过简单的粒度分析来完成:计算到点之间的距离。我们使用 distanceA2B()函数来做到这一点。

现在,您可以在内部偏移,并且可以捕捉该对象,因为该对象足够近。如果未达到最小偏移量,则将狮子放回到lionOrigin上。

最后,在 konvajs 中,您可以使用.x().y()轻松获得或将位置设置为狮子

类似这样的东西:

var lionOrigin = [50,50];
var lionDestiny = [200,200];
var offset = 20;

distanceA2B(a,b) {
  return Math.sqrt( ((a[0]-b[0])*(a[0]-b[0])) + ((a[1]-b[1])*(a[1]-b[1])) );
}

lion.on('dragend', (e) => {
  var d = distanceA2B([lion.x(),lion.y()],lionDestiny);
  if(d<offset){
    lion.x(lionDestiny[0]);
    lion.y(lionDestiny[1]);
  }else{
    lion.x(lionOrigin[0]);
    lion.y(lionOrigin[1]);
  }
});

希望这会有所帮助!