Javascript 缩放时如何绑定图像平移（HTML画布）

我试图限制界限，但我遇到了一些问题。我正在从另一个画布放大图像，然后实现缩放和平移。我的问题（代码如下）是限制/封顶offsetx/y，这样你就不会看到空白；只有图像的一部分

请原谅这一团糟！感谢您的帮助！：P

var动物敏感度=0.2；
var canvas=document.getElementById（“canvas”）；
var canvas2=document.getElementById（“canvas2”）；
var context=canvas.getContext（“2d”）；
var context2=canvas2.getContext（“2d”）；
var宽度=200；
var高度=200；
var量表=1；
var-originx=0；
var初始值=0；
变量偏移量={x:0，y:0}；
//用随机像素填充较小的画布
对于（变量x=0；x<100；x++）
对于（变量y=0；y<100；y++）
{
var rando=function（）{return Math.floor（Math.random（）*9）}；
var-val=rando（）；
context2.fillStyle=“#”+val+val+val；
context2.fillRect（x，y，1,1）；
}
//画大一点的画布
函数绘图（）
{
context.imageSmoothingEnabled=false；
//将屏幕清除为白色。
context.fillStyle=“白色”；
fillRect（originx-offset.x，originy-offset.y，宽度/比例，高度/比例）；
drawImage（画布2，0，0，宽度，高度）；
}
//以60帧/秒的速度绘制循环。
设置间隔（绘图，1000/60）；
canvas.onmouseheel=函数（事件）{
event.preventDefault（）；
//获取鼠标偏移量。
var mousex=event.clientX-canvas.offsetLeft；
var mousey=event.clientY-canvas.offsetTop；
//将控制盘规格化为+1或-1。
var车轮=event.wheeldta/120；
//计算缩放因子。
var zoom=Math.exp（轮子*缩放密度）；
//进行转换，使可见原点位于上下文的原点。
translate（originx-offset.x，originy-offset.y）；//offset是平移
//确保我们缩小的比例不会超过正常比例
var resultingScale=缩放*缩放；
如果（结果量表<1）
缩放=1/比例；
//计算新的可见原点。最初鼠标位于
//距离鼠标/缩放角，我们希望该点位于下方
//鼠标在缩放后保持在原来的位置，但是
//在离拐角处的鼠标/新刻度处。因此，我们需要
//移动原点（角点坐标）以说明这一点。
originx-=mousex/（比例*缩放）-mousex/比例；
原始-=鼠标/（比例*缩放）-鼠标/比例；
//缩放它（由于上面的平移，以原点为中心）。
缩放（缩放、缩放）；
//将可见原点偏移到其正确位置。
context.translate（-originx+offset.x，-originy+offset.y）；//偏移量正在平移
//更新比例和其他。
缩放*=缩放；
}
document.onkeydown=函数（evt）
{
var offsetx=0；
var offsety=0；
开关（evt.WHIT）
{
案例37://左
offsetx=1；
打破
案例38://以上
offsety=1；
打破
案例39://对
offsetx=-1
打破
案例40://向下
offsety=-1；
打破
}
offsetx/=比例；
偏移量/=刻度；
偏移量x+=偏移量x；
偏移量y+=偏移量；
翻译（offsetx，offsety）；
}

使用变换矩阵约束视图 要约束位置，需要将图像的角坐标变换为屏幕坐标。由于在不同浏览器中获取转换仍然不是标准的，下面的演示保存了转换的副本

对象

视图

保存画布视图。使用函数查看.setBounds时（上、左、右、下）视图将锁定到该区域（您正在查看的图像0,0100）

缩放和位置（原点）将受到约束，以使边界位于由

view.setContext（context）

设置的画布上下文的边缘之外

函数

scaleAt（pos，amount）将在指定位置缩放（例如鼠标位置）

要设置转换，请使用
view.apply（）
这将更新视图转换并设置上下文转换

下面是一些其他的函数，它们可能会很方便，请参见代码

演示使用鼠标单击、拖动和滚轮进行平移和缩放

演示是OP的示例宽度修改的副本，用于回答问题


//通过javascript执行任何形式的动画时，请使用requestAnimationFrame
请求动画帧（绘制）；
var动物密度=0.2；
var canvas=document.getElementById（“canvas”）；
var canvas2=document.getElementById（“canvas2”）；
var context=canvas.getContext（“2d”）；
var context2=canvas2.getContext（“2d”）；
var宽度=200；
var高度=200；
context.font=“24px arial”；
context.textAlign=“中心”；
context.lineJoin=“round”//防止strokeText上出现斜接毛刺
//用随机像素填充较小的画布
对于（变量x=0；x<100；x++）{
对于（变量y=0；y<100；y++）{
var rando=function（）{return Math.floor（Math.random（）*9）}；
var-val=rando（）；
如果（x==0 | | y==0 | | x==99 | | y==99）{
context2.fillStyle=“#FF0000”；
}否则{
context2.fillStyle=“#”+val+val+val；
}
context2.fillRect（x，y，1,1）；
}
}
//鼠标保持鼠标位置按钮状态，如果鼠标悬停在带有overid的画布上
变量鼠标={
pos:{x:0，y:0}，
worldPos:{x:0，y:0}，
posLast:{x:0，y:0}，
按钮：false，
overId:，//元素鼠标的id已结束
拖动：false，
whichWheel:-1，//第一个控制盘事件将获得控制盘
车轮：0，
}
//视图控制柄缩放和平移（也可以控制旋转，但已将其去掉，因为旋转不能在不丢失部分图像或看到部分背景的情况下进行约束）。
常量视图=（（）=>{
常量矩阵=[1,0,0,1,0,0]；//当前视图变换
常量invMatrix=[1,0,0,1,0,0]；//当前逆视图变换
var m=矩阵；//别名
var im=invMatrix；//别名
变量比例=1；//当前比例
常数界限={