如何在2D畫布中實現縮放功能？

我正在嘗試在JavaScript中爲程序紋理創建一個庫，並且出於某種原因，我無法真正包裹我的頭，因爲我的縮放功能無法工作。我嘗試了很多東西，但我總是得到時髦的結果，而不是我最初想要實現的結果。基本上，如果我放大到一個噪點紋理，我希望它出現所有塊狀。如何在2D畫布中實現縮放功能？

我目前的執行情況：

this.Zoom = function(factor) { 
    var imageData, curData, newData, 
    zoomFactor = Math.pow(2, factor); 

    curData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);  
    newData = ctx.createImageData(curData); 

    for (var y = 0; y < ctx.canvas.height; y++) { 
    for (var x = 0; x < ctx.canvas.width; x++) { 
     var curIndex = y * ctx.canvas.width + x; 
     var targetIndex = Math.floor(y/zoomFactor + x/zoomFactor) * 4; 

     newData.data[curIndex]  = curData.data[targetIndex]; 
     newData.data[curIndex + 1] = curData.data[targetIndex + 1]; 
     newData.data[curIndex + 2] = curData.data[targetIndex + 2]; 
     newData.data[curIndex + 3] = curData.data[targetIndex + 3]; 
    } 
    } 

    ctx.putImageData(newData, 0, 0); 

    return this; 
}

而且這裏是我的jsfiddle：http://jsfiddle.net/j18eqgrq/

出於某種原因，我得到這個奇怪的效果，我不能換我的頭周圍。我想我搞砸了targetIndex。

來源

2015-06-05 Sargo Darya

在你內心的for循環的代碼應該是：

var curIndex = y * ctx.canvas.width * 4 + x * 4; 
var targetIndex = Math.floor(y/zoomFactor) * ctx.canvas.width * 4 + Math.floor(x/zoomFactor) * 4;

你應該採取的RGBA考慮的因素4，並且還縮放圖像索引應通過y * image_width + x

來源

2015-06-05 12:00:12

你先生，太棒了。非常感謝。 –

你來計算可以通過拍攝原始畫布並將其繪製到具有9參數形式context.drawImage的新畫布來實現縮放。這種形式需要源矩形和目標矩形。當尺寸不同時，源會相應拉伸。

另一種方法，你可以使用，當你還沒有繪製任何東西，你想從頭開始繪製它是使用context.scale to set a zoom factor and context.translate to set the zoom center。

來源

2015-06-05 12:10:58 Philipp

如何在2D畫布中實現縮放功能？

回答

相關問題