Question

我正在使用EaselJS将图像文件加载到位图中。我按照我想要的顺序旋转它会遇到麻烦。以下是我正在使用的示例：

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

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

Answer 1

使用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）运行它-settings。

如何在缩放之前旋转已加载的图像对象？

1 个答案: