createjs全球getTransformedBounds

Question

我想得到一个位图(或其他容器)全局边界，即在旋转、缩放、位置等应用之后容器在舞台上的边界。

我有以下情况

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

var parent = new createjs.Container();
parent.x = 50;
parent.rotation = 90;
stage.addChild(parent);

var image = new Image();
image.src = "https://s.imgur.com/images/access/access-logo.png";
image.onload = handleImageLoad;

function handleImageLoad(event) {
    var image = event.target;
    var child = new createjs.Bitmap(image);
    parent.addChild(child);
    stage.update();

    console.assert(child.getTransformedBounds().width === 65);
    console.assert(child.getTransformedBounds().width === 187);
}

请参阅：https://jsfiddle.net/2kr23/48/

这张照片宽187度，高65度，但旋转90度后，我希望它高187度，宽65度。

Answer 1

EaselJS目前没有获得嵌套对象全局边界的方法，但是有几种方法可以解决这个问题。

在您的特定情况下，您可以简单地获得父级的界限：parent.getTransformedBounds().width

https://jsfiddle.net/2kr23/51/

一个更普遍的方法是使用localToGlobal()来找出全局坐标空间中四个角的位置，然后使用最小和最大的范围来得到变换的边界。

类似于：

function getGlobalBounds(child) {
  var tl = child.localToGlobal(0, 0);
  var tr = child.localToGlobal(child.image.width, 0);
  var br = child.localToGlobal(child.image.width, child.image.height);
  var bl = child.localToGlobal(0, child.image.height);

  var minX = Math.min(tl.x, tr.x, br.x, bl.x);
  var maxX = Math.max(tl.x, tr.x, br.x, bl.x);
  var minY = Math.min(tl.y, tr.y, br.y, bl.y);
  var maxY = Math.max(tl.y, tr.y, br.y, bl.y);

  return new createjs.Rectangle(minX, minY, maxX-minX, maxY-minY);
}

https://jsfiddle.net/2kr23/58/