Highlighted

CreateJS : how to limit the movement of my clip to the size of my scene?

Community Beginner ,
Mar 03, 2019

Copy link to clipboard

Copied

Hello!

I have a zoom system that works by scrolling the mouse. I would like however, that when I move in the zoom, the area is limited to the size of my scene.

Currently, I can bring out my image of the canas ...

I drew a rectangle of 1920/1080. So I want the image doesn't exceed this area.

The code and the demo online

//Référence du scénario

_this = this;

// Add a background

var bg = new createjs.Shape();

bg.graphics.beginStroke("#000");

bg.graphics.beginFill("#222");

bg.graphics.setStrokeStyle(1);

bg.graphics.drawRect(0, 0, 1920, 1080);

bg.alpha=0.5;

bg.setBounds(0, 0, 1920, 1080);

var bounds = bg.getBounds();

stage.addChild(bg);

//Mouse cursor

stage.enableMouseOver();

var dragStart = null;

//Gestion du touché sur tablette/mobile

createjs.Touch.enable(stage);

createjs.Ticker.addEventListener("tick", onTick);

stage.addEventListener('mousedown', onMouseDown);

stage.addEventListener('stagemousemove', onMouseMove);

stage.addEventListener('stagemouseup', onMouseUp);

stage.addEventListener('mouseleave', onMouseUp);

canvas.addEventListener('DOMMouseScroll', onMouseWheel, false);

canvas.addEventListener('mousewheel', onMouseWheel, false);

function zoom(delta){

        var p = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

       _this.test.scaleX = _this.test.scaleY = scale;

        var p2 = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        if(_this.test.rotation == 0){

            _this.test.x += (p2.x - p.x) * scale;

            _this.test.y += (p2.y - p.y) * scale;

        }else if (_this.test.rotation == 90){

            _this.test.x -= (p2.y - p.y) * (scale);

            _this.test.y += (p2.x - p.x) * (scale);

        }else if(test.rotation == 180){

            _this.test.x -= (p2.x - p.x) * scale;

            _this.test.y -= (p2.y - p.y) * scale;

        }else{

            _this.test.x += (p2.y - p.y) * (scale);

            _this.test.y -= (p2.x - p.x) * (scale);

        }

    }

    function rotate(r){

        if((_this.test.rotation+r)  > 270){

            _this.test.rotation = 0;

        }else{

            _this.test.rotation += r;

        }

    }

function onMouseDown(){

  dragStart = new createjs.Point(stage.mouseX, stage.mouseY);

}

function onMouseMove(evt){

  if (dragStart){

    var mouse = new createjs.Point(stage.mouseX, stage.mouseY);

    var delta = new createjs.Point(mouse.x - dragStart.x, mouse.y - dragStart.y);

    dragStart = mouse;

    _this.test.x += delta.x;

    _this.test.y += delta.y;

  }

}

function onMouseUp(){

  dragStart = null;

}

function onMouseWheel(e){

  var delta = e.wheelDelta ? e.wheelDelta/100 : e.detail ? -e.detail : 0;

  if (delta) zoom(delta);

  return e.preventDefault() && false;

}

function onTick(){

  stage.update();

}

Thanks!

Matt

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

It seems your code is a CreateJS only solution.

Anyway, the main problem is here:

var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

It should be:

var scale = Math.min(1, Math.min(_this.test.scaleX + delta, 2));

Because in the in the end you need your maximum scale to be 1.

Another issue is that your delta value is coming either as 3 or -3 so the user doesn't really get to see a graduation when using the mouse wheel. You should use just a fraction of the delta value.

And if you're developing in Animate CC, there's no need to call stage.update() in the tick handler function because ANCC will to this automatically for you.

I hope this helps.

Regards,

JC

Views

105

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CreateJS : how to limit the movement of my clip to the size of my scene?

Community Beginner ,
Mar 03, 2019

Copy link to clipboard

Copied

Hello!

I have a zoom system that works by scrolling the mouse. I would like however, that when I move in the zoom, the area is limited to the size of my scene.

Currently, I can bring out my image of the canas ...

I drew a rectangle of 1920/1080. So I want the image doesn't exceed this area.

The code and the demo online

//Référence du scénario

_this = this;

// Add a background

var bg = new createjs.Shape();

bg.graphics.beginStroke("#000");

bg.graphics.beginFill("#222");

bg.graphics.setStrokeStyle(1);

bg.graphics.drawRect(0, 0, 1920, 1080);

bg.alpha=0.5;

bg.setBounds(0, 0, 1920, 1080);

var bounds = bg.getBounds();

stage.addChild(bg);

//Mouse cursor

stage.enableMouseOver();

var dragStart = null;

//Gestion du touché sur tablette/mobile

createjs.Touch.enable(stage);

createjs.Ticker.addEventListener("tick", onTick);

stage.addEventListener('mousedown', onMouseDown);

stage.addEventListener('stagemousemove', onMouseMove);

stage.addEventListener('stagemouseup', onMouseUp);

stage.addEventListener('mouseleave', onMouseUp);

canvas.addEventListener('DOMMouseScroll', onMouseWheel, false);

canvas.addEventListener('mousewheel', onMouseWheel, false);

function zoom(delta){

        var p = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

       _this.test.scaleX = _this.test.scaleY = scale;

        var p2 = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        if(_this.test.rotation == 0){

            _this.test.x += (p2.x - p.x) * scale;

            _this.test.y += (p2.y - p.y) * scale;

        }else if (_this.test.rotation == 90){

            _this.test.x -= (p2.y - p.y) * (scale);

            _this.test.y += (p2.x - p.x) * (scale);

        }else if(test.rotation == 180){

            _this.test.x -= (p2.x - p.x) * scale;

            _this.test.y -= (p2.y - p.y) * scale;

        }else{

            _this.test.x += (p2.y - p.y) * (scale);

            _this.test.y -= (p2.x - p.x) * (scale);

        }

    }

    function rotate(r){

        if((_this.test.rotation+r)  > 270){

            _this.test.rotation = 0;

        }else{

            _this.test.rotation += r;

        }

    }

function onMouseDown(){

  dragStart = new createjs.Point(stage.mouseX, stage.mouseY);

}

function onMouseMove(evt){

  if (dragStart){

    var mouse = new createjs.Point(stage.mouseX, stage.mouseY);

    var delta = new createjs.Point(mouse.x - dragStart.x, mouse.y - dragStart.y);

    dragStart = mouse;

    _this.test.x += delta.x;

    _this.test.y += delta.y;

  }

}

function onMouseUp(){

  dragStart = null;

}

function onMouseWheel(e){

  var delta = e.wheelDelta ? e.wheelDelta/100 : e.detail ? -e.detail : 0;

  if (delta) zoom(delta);

  return e.preventDefault() && false;

}

function onTick(){

  stage.update();

}

Thanks!

Matt

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

It seems your code is a CreateJS only solution.

Anyway, the main problem is here:

var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

It should be:

var scale = Math.min(1, Math.min(_this.test.scaleX + delta, 2));

Because in the in the end you need your maximum scale to be 1.

Another issue is that your delta value is coming either as 3 or -3 so the user doesn't really get to see a graduation when using the mouse wheel. You should use just a fraction of the delta value.

And if you're developing in Animate CC, there's no need to call stage.update() in the tick handler function because ANCC will to this automatically for you.

I hope this helps.

Regards,

JC

Views

106

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 03, 2019 0
Community Beginner ,
Mar 03, 2019

Copy link to clipboard

Copied

//Référence du scénario

_this = this;

// Add a background

var bg = new createjs.Shape();

bg.graphics.beginStroke("#000");

bg.graphics.beginFill("#222");

bg.graphics.setStrokeStyle(1);

bg.graphics.drawRect(0, 0, 1920, 1080);

bg.alpha=0.5;

bg.setBounds(0, 0, 1920, 1080);

var bounds = bg.getBounds();

stage.addChild(bg);

//Curseur souris

stage.enableMouseOver();

var dragStart = null;

//Gestion du touché sur tablette/mobile

createjs.Touch.enable(stage);

createjs.Ticker.addEventListener("tick", onTick);

stage.addEventListener('mousedown', onMouseDown);

stage.addEventListener('stagemousemove', onMouseMove);

stage.addEventListener('stagemouseup', onMouseUp);

stage.addEventListener('mouseleave', onMouseUp);

canvas.addEventListener('DOMMouseScroll', onMouseWheel, false);

canvas.addEventListener('mousewheel', onMouseWheel, false);

function zoom(delta){

        var p = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

      _this.test.scaleX = _this.test.scaleY = scale;

        var p2 = _this.test.globalToLocal(stage.mouseX, stage.mouseY);

        if(_this.test.rotation == 0){

            _this.test.x += (p2.x - p.x) * scale;

            _this.test.y += (p2.y - p.y) * scale;

        }else if (_this.test.rotation == 90){

            _this.test.x -= (p2.y - p.y) * (scale);

            _this.test.y += (p2.x - p.x) * (scale);

        }else if(test.rotation == 180){

            _this.test.x -= (p2.x - p.x) * scale;

            _this.test.y -= (p2.y - p.y) * scale;

        }else{

            _this.test.x += (p2.y - p.y) * (scale);

            _this.test.y -= (p2.x - p.x) * (scale);

        }

    }

    function rotate(r){

        if((_this.test.rotation+r)  > 270){

            _this.test.rotation = 0;

        }else{

            _this.test.rotation += r;

        }

    }

function onMouseDown(){

  dragStart = new createjs.Point(stage.mouseX, stage.mouseY);

}

function onMouseMove(evt){

  if (dragStart){

    var mouse = new createjs.Point(stage.mouseX, stage.mouseY);

    var delta = new createjs.Point(mouse.x - dragStart.x, mouse.y - dragStart.y);

    dragStart = mouse;

    _this.test.x += delta.x;

    _this.test.y += delta.y;

  }

}

function onMouseUp(){

  dragStart = null;

}

function onMouseWheel(e){

  var delta = e.wheelDelta ? e.wheelDelta/100 : e.detail ? -e.detail : 0;

  if (delta) zoom(delta);

  return e.preventDefault() && false;

}

function onTick(){

  stage.update();

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2019 0
Adobe Community Professional ,
Mar 04, 2019

Copy link to clipboard

Copied

Hi.

It seems your code is a CreateJS only solution.

Anyway, the main problem is here:

var scale = Math.max(1, Math.min(_this.test.scaleX + delta, 2));

It should be:

var scale = Math.min(1, Math.min(_this.test.scaleX + delta, 2));

Because in the in the end you need your maximum scale to be 1.

Another issue is that your delta value is coming either as 3 or -3 so the user doesn't really get to see a graduation when using the mouse wheel. You should use just a fraction of the delta value.

And if you're developing in Animate CC, there's no need to call stage.update() in the tick handler function because ANCC will to this automatically for you.

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2019 0
Community Beginner ,
Mar 05, 2019

Copy link to clipboard

Copied

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2019 1
Adobe Community Professional ,
Mar 05, 2019

Copy link to clipboard

Copied

You're welcome.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2019 0