0

I need to move this "box" group while touching or mousemoving inside the white-part of the screen.

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>

The group is containing boxes I have added. It is working fine to move by key-arrows and the page can be found at webpage

Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
Ruben Ravnå
  • 659
  • 7
  • 17

1 Answers1

0

I think you want to use function for 'touchmove mousemove' events, neither a result of function.

gamepart.on('touchmove mousemove', function() {
    moving(stage.getPointerPosition())
});
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • well now something happens when touching and when moving mouse. But it's not working properly. Maybe you can test on my link? – Ruben Ravnå Jun 09 '14 at 17:27
  • can you recommend some way that I can debug this code? – Ruben Ravnå Jun 09 '14 at 17:29
  • I think best way - 1. make bottom rectangle draggable. 2 Set `dragBoundFunc` function to the rectangle that returns {0,0} (not moving rect while dragging). 3 Then listen `dragmove` event and do your stuff inside event callback. – lavrton Jun 10 '14 at 01:17