帆布：用縮放圖像替換大圖像

Question

我有一個繪製圖像的畫布。

用戶可以放大或縮小該圖像。

當它們停止縮放時，我用高分辨率版本替換縮放圖像。

即100x100圖像被縮放2，然後當它們停止時，我將用它的未縮放的200x200版本替換縮放的圖像，並將其渲染到畫布中，在那裏它正好覆蓋放大版本的位置，因此用戶除了圖像突然「銳化」之外什麼也看不到。

這一切都完美的工作，當我最初居中圖像，然後縮放中心。

所以我也想讓縮放周圍的當前鼠標點，而不是隻是中心，再次我已經完美的工作，我可以放大和縮小圖像正確。

我的問題是當我沒有放大中心時用高分辨率版本替換圖像。

我不知道該把它放回原處的位置。

即如何計算翻譯參數。

我有相同的尺寸畫布，我有一個圖像是以前的兩倍的大小，我有最後一次縮放操作中使用的鼠標座標，我有使用的比例。

那麼如何將大圖像放在縮放圖像上？

TIA 羅布

Answer 1

我想我想通了。 重新運行上次縮放變換，然後應用倒置比例，然後渲染較大的圖像。

ctx.translate(pt.x,pt.y); 
ctx.scale(factor,factor); 
ctx.translate(-pt.x,-pt.y); 

ctx.scale(1/factor,1/factor); 

ctx.drawImage(.....) 

ctx.setTransform(1,0,0,1,0,0);