HTML5 Canvas放大镜

转载 (原文地址) 冷月无声 随笔 HTML5 3303阅读 2014-03-18 16:30:17 举报

[p]最近逛天猫买球鞋的时候偶然发现了这东西,觉得挺有意思,于是自己决定做一个。
我们经常在网上买东西的时候时常都会用放大镜去细心看某件商品,尤其是买衣服的时候,放大镜能够帮助我们仔细查看衣服的材质、颜色、大小搭配等信息。
现在各大电商网站用的商品放大镜基本上都是用原生js实现的,很少有用到canvas实现,我这也算填补业界空白吧![/p]

1、实现原理

[p]放大镜主要由三部分组成:小图、遮罩、大图。通过在小图上mousemove事件移动遮罩,然后得到遮罩坐标换算得到大图展示数据。
canvas里的drawImage可以在画布上画一张图片,其中主要由五个参数组成:img-图片对象、x-图片裁剪的x坐标、y-图片裁剪的y坐标、width-裁剪宽度、height-裁剪高度,利用这五个参数就能到达图片部分放大显示的效果,跟css里的clip属性差不多原理。[/p]
[code]context.rect(x, y, this.opts.maskWidth, this.opts.maskHeight);//原图移动展示
context.drawImage(this.targetImg, x, y, opts.targetImgWidth, opts.targetImgHeight);//放大图移动展示[/code]

2、公式换算

[code]left = left < 1 ? 1 : left > opts.sourceWidth-opts.maskWidth ? opts.sourceWidth-opts.maskWidth-1 : left;
top = top < 1 ? 1 : top > opts.sourceHeight-opts.maskHeight ? opts.sourceHeight-opts.maskHeight-1 : top;
left2 = left / (opts.sourceWidth-opts.maskWidth)(opts.targetWidth - opts.targetImgWidth);
top2 = top / (opts.sourceHeight-opts.maskHeight)
(opts.targetHeight - opts.targetImgHeight);[/code]
演示地址:http://xiechengxiong.com/xui/demos/magnifier/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复