如何在縮放前旋轉加載的圖像對象？

我正在使用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

如何在縮放前旋轉加載的圖像對象？

回答

相關問題