寫幾個(gè)滑塊控制不同方向超出部分大小，注意這里就不能再使用 drawImageByScale 了，因?yàn)檫@個(gè)函數(shù)是以中心為縮放de。

html代碼，max,value等值隨意。

<input?type="range"?name="range"?id="vertical"?min="0"?max="3.0"?step="0.01"?value="1.5"?class="slider?left">

js代碼：

let?canvas?=?document.querySelector('#canvas'),
????vertical?=?document.querySelector('#vertical'),????//?右側(cè)滑塊
???slider?=?document.querySelector('#range');
???
???...
???
let?scale?=?slider.value;
let?exceedInfo?=?{?dx:?0,?dy:?0,?imageWidth:?0,?imageHeight:?0?};???//?縮放后的圖像信息
...
image.onload?=?()?=>?{
???vertical.onmousemove?=?()?=>?{
?????const?{?dx,?dy?}?=?exceedInfo;
?????dy?<?0?&&?drawExceedImage(vertical.value);?//?超出的時(shí)候小于0
???}
}

//?繪制超出部分
function?drawExceedImage(y)?{
???context.clearRect(0,?0,?canvas.width,?canvas.height);?//?清空畫布
???const?{?dx,?imageWidth,?imageHeight?}?=?exceedInfo;
???context.drawImage(image,?dx,?-y,?imageWidth,?imageHeight);
}
????????????
function?drawImageByScale(scale)?{
??...
??if?(dy?<?0)?{
????let?max?=?Math.abs(dy)?*?2;??//?滑塊的最大值，dy是頂部超出，因?yàn)榭v向只用了一個(gè)滑塊，所以底部?+?頂部?=?*2
????vertical.max?=?max;
????vertical.value?=?max?/?2;??//?初始值是中間值，表示無translateY
??}
??...
????return?{?dx,?dy,?imageWidth,?imageHeight?}
}

一開始是這樣：

這時(shí)候其實(shí)沒有超出，可以隱藏右側(cè)滑塊，我沒寫。

放大后這樣（已經(jīng)在垂直方向超出了）：

拖到頂部是這樣：

拖到底部是這樣：