createjs - stage.mouseX

1.4k views Asked by At

I had noticed that createjs latest builds(0.8.0 and 0.8.1) has bug. if you click few times out of canvas(stage) and after trying click inside its stops shows you correct stage.mouseX & mouseY. its always shows "old" values.

this bug only on android.

http://oligarch.us/temp/createjs/index8.html (bug here). click few times outside of stage (grey) and after click on stage(yellow). nothing happens.

http://oligarch.us/temp/createjs/index7.html (no bug, using 0.7.1)

any ideas? any suggestions?

my code:

var stage;
var canvas;

var $width  = 500;
var $height = 900;

var box;

window.onload = function()
{
    //fixCocoonEaselJSStageTouch();
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = true;

    stage = new createjs.Stage(canvas);
    createjs.Touch.enable(stage);

    log("easejs version: " + createjs.EaselJS.version);

    stage.snapToPixelsEnabled  = true;
    stage.enableMouseOver(0);

    //stage.mouseEnabled = false;
    stage.mouseMoveOutside = true;

    //createjs.Touch.enable(stage);
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", update);

    //createjs.Ticker.timingMode = createjs.Ticker.useFrames;

    window.addEventListener('resize', resize, false);
    resize();

    var s = new createjs.Shape();
    s.graphics.beginFill("#FFFF00").drawRect(0, 0, 630, 960);
    stage.addChild(s);

    box = new createjs.Container;
    var s = new createjs.Shape();
    s.graphics.beginFill("#FF0000").drawRect(0, 0, 50, 50);
    box.addChild(s);

    stage.addChild(box);

    stage.addEventListener("mousedown",function(){
        log(stage.mouseX)
    })
};

function update(e) {
    stage.update(e);

    box.x = stage.mouseX;
    box.y = stage.mouseY;
 };

function resize() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = $width / $height;

    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        // window width is too wide relative to desired game width
        newWidth = newHeight * widthToHeight;

        gameArea.style.height = (newHeight) + 'px';
        gameArea.style.width = newWidth + 'px';
    } else { // window height is too high relative to desired game height
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';
}
function log(o){
    console.log(o);
};
0

There are 0 answers