使用easeljs保存旋转图像？

Question

我正在使用easeljs将位图图像加载到画布上。我可以应用旋转，我想得到修改后的dataUrl图像，显示旋转。但是当使用cache或getCacheDataURL时，旋转似乎被忽略了。

示例代码-- 小提琴手

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

// Create an image.
var image = new Image();
// Since this sample is cross-domain, we must set this flag.
// Note that the origin server supports CORS.
image.crossOrigin = "Anonymous";
image.onload = createImage;
image.src = "http://playpen.createjs.com/CORS/duck.png";

// rotate the image
bmp.rotation = 45;

stage.addChild(bmp);

function createImage() {

  // Update the stage once to show the loaded image (at its native size)
  stage.update();

  // Cache the bitmap. This is necessary to create the cache-canvas.
    bmp.cache(0,0,image.width,image.height);

   // Note that if you update again, it will show the canvas image as blurred.
   //stage.update();

  // Get the cache-canvas's data url.
  var url = bmp.getCacheDataURL();

  // Create a new image with the data url, and add it to the body.
  var img2 = new Image();
  img2.src = url;
  document.body.appendChild(img2);
}

Answer 1

图像仅在其父上下文中旋转。旋转它不会改变源的方向，即使您缓存它。

这里是一个快速更新，其中位图被添加到一个容器，容器被缓存而不是bmp。由于bmp是在容器内旋转的，所以它看起来像预期的那样。

http://jsfiddle.net/ecwd5vdz/2/

var cont = new createjs.Container();
cont.addChild(bmp);
//
cont.cache(0,0,image.width,image.height);

希望这能有所帮助。