为了账号安全,请及时绑定邮箱和手机立即绑定

sx,sy,dx,dy不理解

drawMagnifier(point)中

    var sx = image_lg_xc - radius;
    var sy = image_lg_yc - radius;
    var dx = point.x - radius;
    var dy = point.y - radius;

这四句话不理解,可以帮我解答一下吗?

正在回答

2 回答

关于canvas的sx,sy理解,理解了这个后就理解dx,dy:

  1. 用户在第一个canvas上点击获得一个位置ux,uy。

  2. 需要在第二个canvas获得sx,sy,

    需要理解你要在第二个canvas 中获取一个区域,这个区域大小就是2倍的mr,那么这个mr的左上角坐标怎么获得,就是sx=ux*scale-mr,宽度就是2*mr

  3. 在第一个canvas显示这个放大镜

         context.drawImage(第二个canvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr)

0 回复 有任何疑惑可以回复我~

所谓放大,就是将大图相应位置的区域(注意,这个区域和放大镜大小相同)抠出来显示在放大镜中即可。所以,只要根据放大倍数和放大镜中心点,去大图中找到匹配点,然后以这个点为中心,抠一个放大镜大小的图。这就是为什么找起始点都是减去 radius 的原因。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Canvas玩转图像处理
  • 参与学习       60244    人
  • 解答问题       124    个

canvas系列第三课,学会编写图像算法,一起玩转图像处理吧

进入课程

sx,sy,dx,dy不理解

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信