为什么kineticJS无法通过触摸或鼠标移动工作?

时间:2014-06-09 13:10:31

标签: html5-canvas kineticjs mousemove touchmove

我需要移动这个"框"在屏幕的白色部分内触摸或鼠标移动时进行分组。

enter image description here

    <script defer="defer">
    var stage = new Kinetic.Stage({
        container: 'fullscreenDiv',
        width: 1180,
        height: 664
    });

    var layer = new Kinetic.Layer();

    var gamepart = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 1180,
        height: 500,
        stroke: 'black',
        strokeWidth: 4
    });

    var statuspart = new Kinetic.Rect({
        x: 0,
        y: 500,
        width: 1180,
        height: 164,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 4
    });

    var group = new Kinetic.Group({
        draggable: true,
        dragBoundFunc: function(pos) {
            return {
                x: pos.x,
                y: this.getAbsolutePosition().y
            }
        }
    });


    window.addEventListener('keydown', function(e) {
        if (e.keyCode == 37) //Left Arrow Key
            moveBoxes(-10);
        if (e.keyCode == 39) //Right Arrow Key
            moveBoxes(10);
        stage.draw();
    });

    function moveBoxes(pixels)
    {
        group.x(group.x() + pixels);
        stage.draw();
    }

    var oldPos = null;
    var touchPos = null;
    gamepart.on('touchmove mousemove', moving(stage.getPointerPosition()));


    function moving(mousePos){
        if(!oldPos)
            oldPos = stage.getPointerPosition();
        touchPos = mousePos;
        var x = touchPos.x - oldPos.x;
        moveBoxes(x);
    }
</script>

该组包含我添加的方框。 它可以通过键箭头移动,页面可以在webpage

找到

1 个答案:

答案 0 :(得分:0)

我认为您希望function用于'touchmove mousemove'个事件,而不是函数的结果。

gamepart.on('touchmove mousemove', function() {
    moving(stage.getPointerPosition())
});