[英]HTML5 canvas zoom draw again
目前,我正在嘗試放大畫布,並再次繪制整個畫布
var painter = document.getElementById('painter');
var cp = painter.getContext('2d');
var scale = 1;
var originx = 0;
var savedData = [];
var originy = 0;
var zoom = 0;
$('#painter').on('mousewheel', function(event) {
var imgData = cp.getImageData(0, 0, painter.width, painter.height);
savedData.push(imgData);
var mousex = event.clientX - painter.offsetLeft;
var mousey = event.clientY - painter.offsetTop;
var wheel = event.deltaY;//n or -n
var zoom = 1 + wheel/2;
cp.translate(
originx,
originy
);
cp.scale(zoom,zoom);
cp.translate(
-( mousex / scale + originx - mousex / ( scale * zoom ) ),
-( mousey / scale + originy - mousey / ( scale * zoom ) )
);
if (savedData.length > 0) {
var imgData = savedData.pop();
cp.putImageData(imgData, 0, 0);
}
originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
scale *= zoom;
});
事情是行不通的。 畫布從未更新過...變量似乎很好,因為我需要再次繪制整個畫布,因此我將所有數據保存到數組中
getImageData & context.putImageData
是非常昂貴的操作。
相反,您可以將原始內容存儲在使用創建的第二個僅限內存的畫布中
var secondCanvas = document.createElement('canvas')
var secondContext = secondCanvas.getContext('2d');
secondCanvas.width=mainCanvas.width;
secondCanvas.height=mainCanvas.height;
secondContext.drawImage(mainCanvas,0,0);
然后將第二個畫布用作您在主畫布上的縮放繪圖的圖像源:
mainContext.drawImage(secondCanvas,x,y);
將內容緩存到第二個畫布后,可以使用此Stackoverflow答案使用鼠標滾輪進行縮放:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.