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

我正在使用EaselJS将图像文件加载到位图中。我在按照自己喜欢的顺序旋转时遇到麻烦。这里是我正在使用的一个例子：如何在缩放前旋转加载的图像对象？

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

这是怎么回事它是旋转缩放的图像，而不是原来的。 任何想法如何旋转原始图像，然后缩放它？我想以编程的方式做到这一点，而不是混淆原始图像文件，实际上这不是我正在做的选项。

来源

2013-07-12 Josh

使用createjs.Bitmap改造一个显示对象将绝对不会操纵原始图像，如果你想操纵你将不得不通过本机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-12 12:27:37 olsn

感谢您的答案，这确实允许在与createjs一起使用前更改图像。我还发现另一种更紧凑的方式。您可以将位图加载到容器中。如果修改位图比例，则旋转容器似乎具有相同的效果。 – Josh

hm，那么我不完全确定你在找什么，因为你的解决方案也会影响到那个非常位图的实例，而不是原始图像 - 但是你找到了一个解决方案，所以这很重要;） – olsn

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

回答

相关问题