createjs计算圆形扇区的边界答案

【问题标题】：createjs calculate bounds of circular sectorcreatejs计算圆形扇区的边界
【发布时间】：2017-11-26 10:51:32
【问题描述】：

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

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

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

HTML

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

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

【问题讨论】：

标签： javascript canvas createjs easeljs bounds

【解决方案1】：

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

getBounds 定义了显示对象内部的边界框
getTransformedBounds 定义应用转换后 DisplayObject（在父级中）的边界框边界框。

一张图胜过一千字：

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

【讨论】：