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() 在全局坐标 space 中找到 4 个角的位置，然后使用最小和最大范围来获取转换后的边界。

类似于：

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/

createjs 全局 getTransformedBounds

createjs global getTransformedBounds

createjs

easeljs