Search code examples
javascriptcanvascreatejseaseljsbounds

createjs calculate bounds of circular sector

I create a circular sector manually, so I know the starting bounds. After that, the user can rotate the sector using as regX-regY the center (of the circle), so I move temporarily the center. When it's done, how can I calculate the new bounds of the object?

I've tried various things, but I think I don't understand how getTransformedBounds work. Can someone explain the results of this sample jsfiddle, or suggest a solution?

Follows a screenshot of the current working code... (you can replicate visiting the already mentioned jsfiddle). Code below the picture.

enter image description here

HTML

<canvas id="canvas" width="200" height="200" style="background:white"></canvas>
<p id="report"></p>

JS

var stage = new createjs.Stage("canvas");

var container = createSector();

report.innerHTML+='original bounds: '+(container.getBounds());

stage.addEventListener("stagemousedown", handleSectorTouch);

function createSector(){
    var shape = new createjs.Shape().set({x:13});
    var container = new createjs.Container().set({x:100, y:100});
    container.center={x:13,y:0}
    container.addChild(shape);
    container.radius = 50;
    stage.addChild(container);

    // Draw Random Segments
    var startAngle = 75 * Math.PI/180;
    var endAngle = 105*Math.PI/180;

    shape.graphics.f('rgba(255,0,255,.5)');
    shape.graphics.moveTo(0,0)
    shape.graphics.arc(0,0,container.radius,startAngle,endAngle);

    container.cache(0,0,26,container.radius);
    container.setBounds(0,0,26,container.radius);

    stage.update();
  return container;
}

var drag;
function handleSectorTouch(){
    drag = container;
    drag.x+=drag.center.x;
    drag.y+=drag.center.y;
    drag.regX=drag.center.x;
    drag.regY=drag.center.y;
    var db = drag.getBounds();
    drag.setBounds(drag.x,drag.y,db.width,db.height)

    drag.gCenter = drag.localToGlobal(drag.center.x,drag.center.y);
    drag.origAngle = Math.atan2(stage.mouseY - drag.gCenter.y, stage.mouseX - drag.gCenter.x) * 180 / Math.PI;
    stage.addEventListener("stagemousemove", rotateSector);
    stage.addEventListener("stagemouseup", endRotateSector);

    report.innerHTML+='<br/>start rotation...';
}
function rotateSector(evt){
    var angle = Math.atan2(stage.mouseY - drag.gCenter.y, stage.mouseX - drag.gCenter.x) * 180 / Math.PI;
    angle -=drag.origAngle;
    drag.rotation = angle;
    stage.update();
}
function endRotateSector(evt){
    report.innerHTML+='<br/>getBounds: '+(drag.getBounds().clone());
    report.innerHTML+='<br/>getTransformedBounds: '+(drag.getTransformedBounds().clone());

    stage.removeEventListener("stagemousemove", rotateSector);
    stage.removeEventListener("stagemouseup", endRotateSector);
    stage.update();
}
Solution

  • OK, after some research I found the following about getBounds and getTransformedBounds:

    • getBounds defines the bounding box inside the DisplayObject
    • getTransformedBounds defines the bounding box of the bounding box of the DisplayObject (in the parent) after transformations are applied.

    A picture will be worth more than one thousand words:

    enter image description here

    So, to partially answer my own question, I need to calculate the bounds of the shape myself, which is relatively easy, as I know the center of the sector, the radius, the angle and finally the rotation of the container. I would take as reference some points as well as the ortogonals inside the area, which would return min-x, max-x, min-y and max-y. One more pic:

    enter image description here