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（在父级中）的边界框的边界框。

一张图片的价值超过一千字：

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

createjs计算循环扇区的边界

1 个答案: