1

我将 EaselJS 与加载到位图中的图像文件一起使用。我无法让它按我想要的顺序旋转。这是我正在使用的示例：

var bitmap = new createjs.Bitmap("image.png");
bitmap.rotation = -10;
bitmap.scaleX = 1.5;
bitmap.scaleY = 1.2;

发生的事情是它正在旋转缩放的图像而不是原始图像。任何想法如何旋转原始图像然后缩放它？我想以编程方式进行而不是弄乱原始图像文件，实际上这不是我正在做的选择。

4

1 回答 1

0

使用 createjs.Bitmap 转换 DisplayObject 永远不会操纵原始图像，如果要操纵原始图像，则必须通过本机HTMLCanvas或HTMLImage

这是一个如何缩放原始图像的示例（添加旋转应该只是 3-4 附加行），您当然必须使用返回的引用创建您的 createjs.Bitmap，而不是使用原始图像源字符串。

function nativeScale(img, scale)
{
    var dst_canvas = document.createElement('canvas');
    dst_canvas.width = Math.max(1,img.width * scale);
    dst_canvas.height = Math.max(1,img.height * scale);
    var dst_ctx = dst_canvas.getContext('2d');

    dst_ctx.drawImage(img,0,0,dst_canvas.width,dst_canvas.height);

    if ( typeof canvas.toDataURL == "undefined" ) return dst_canvas;

    var img = new Image();
    img.width = canvas.width;
    img.height = canvas.height;
    img.src = canvas.toDataURL("image/png");

    return img;
}

我希望这会有所帮助。作为附加说明：当通过本地文件系统执行时，这将不起作用，由于浏览器的安全设置，您将只能通过 Web 服务器（在线或 XAMPP 等）运行它。

于 2013-07-12T12:27:37.697 回答