createjs 计算圆形扇区的边界

Question

我手动创建了一个圆形扇区，所以我知道起始边界。之后，用户可以使用 regX-regY 中心（圆的）旋转扇区，所以我暂时移动了中心。完成后，如何计算对象的新边界？

我尝试过各种方法，但我想我不明白 getTransformedBounds 是如何工作的。有人可以解释 this sample jsfiddle 的结果或提出解决方案吗？

以下是当前工作代码的屏幕截图...（您可以复制访问已经提到的 jsfiddle）。图片下方的代码。

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();
}

Answer 1

好的，经过一番研究，我发现了以下关于 getBounds 和 getTransformedBounds 的信息：

getBounds 定义 DisplayObject

的边界框

getTransformedBounds 定义应用转换后 DisplayObject（在父级中）的边界框的边界框。

一图胜千言：

所以，为了部分回答我自己的问题，我需要自己计算形状的边界，这相对容易，因为我知道扇形的中心、半径、角度以及最后的旋转容器。我会参考一些点以及区域内的正交线，这将 return min-x、max-x、min-y 和 max-y。再来一张：

createjs 计算圆形扇区的边界

createjs calculate bounds of circular sector

javascript

canvas

createjs

easeljs

bounds