sx,sy,dx,dy不理解-慕课网

首页课程实战体系课手记专栏慕课教程

sx,sy,dx,dy不理解

来源：3-3 使用离屏Canvas制作放大镜效果

qq_奋斗的我_03498945

2016-12-21 22:07

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回答

慕设计2571273

2017-09-21 17:26:41
关于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 0
撕烤兔

2016-12-27 10:35:18

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

0 0

Canvas玩转图像处理

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

60311 学习 · 124 问题

相似问题

sx, sy, dx, dy,怎样算

回答 2

drawMaginfier 减mr 是问什么理解不了

回答 2

放大镜的理解？

回答 3

canvas 图片处理

回答 3

canvas跨域处理

回答 1

打开慕课网App查看更多内容