drawMagnifier(point)中
var sx = image_lg_xc - radius;
var sy = image_lg_yc - radius;
var dx = point.x - radius;
var dy = point.y - radius;
这四句话不理解,可以帮我解答一下吗?
关于canvas的sx,sy理解,理解了这个后就理解dx,dy:
用户在第一个canvas上点击获得一个位置ux,uy。
需要在第二个canvas获得sx,sy,
需要理解你要在第二个canvas 中获取一个区域,这个区域大小就是2倍的mr,那么这个mr的左上角坐标怎么获得,就是sx=ux*scale-mr,宽度就是2*mr
在第一个canvas显示这个放大镜
context.drawImage(第二个canvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr)
所谓放大,就是将大图相应位置的区域(注意,这个区域和放大镜大小相同)抠出来显示在放大镜中即可。所以,只要根据放大倍数和放大镜中心点,去大图中找到匹配点,然后以这个点为中心,抠一个放大镜大小的图。这就是为什么找起始点都是减去 radius 的原因。