Canvas---Canvas图像处理、图片查看器实现思路整理、拖动边界控制

标签：canvas   web   javascript   html   html5   

没想到一个图片查看器花了我这么多时间，而且没做好。

现在整理下思路，然后把不足的地方记一下，日后请教他人。

基本思路：

一、图片查看器功能---缩放

要实现自由缩放，先要实现图片对canvas的自适应，就是给你一张大图片，你能够把它合理缩放后恰好绘制在canvas中。

具体做法是：例如：图片为500*500，canvas为240*320，那就取缩放宽度为240，长度为240/500*500，利用缩放宽度与长度，绘制图片即可。

然后是自由缩放，这时，你的缩小放大对象只要是一个矩形就好，然后图片去适应这个矩形，然后再利用获得的缩放宽高，绘制出放大了的图

二、图片查看器功能---拖动

canvas这边主要利用context.isPointInPath(x,y);这个方法来判断当前点击了哪个对象。然后就可以拖动了。具体可以看我之前的文章。

拖动的边界检测，这个主要是通过维护一个顶点的可拖动矩形实现。具体看图。

三、不足

由于我缩放是默认canvas中点在做，如果进行了拖动的话，相应放大的点就不是中点了，这怎么办？尝试了很多方法效果都不是很好。求教。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

图解：

Canvas---Canvas图像处理、图片查看器实现思路整理、拖动边界控制

标签：canvas   web   javascript   html   html5   

原文地址：http://blog.csdn.net/mikuscallion/article/details/43491355