没想到一个图片查看器花了我这么多时间,而且没做好。
现在整理下思路,然后把不足的地方记一下,日后请教他人。
基本思路:
一、图片查看器功能---缩放
要实现自由缩放,先要实现图片对canvas的自适应,就是给你一张大图片,你能够把它合理缩放后恰好绘制在canvas中。
具体做法是:例如:图片为500*500,canvas为240*320,那就取缩放宽度为240,长度为240/500*500,利用缩放宽度与长度,绘制图片即可。
然后是自由缩放,这时,你的缩小放大对象只要是一个矩形就好,然后图片去适应这个矩形,然后再利用获得的缩放宽高,绘制出放大了的图
二、图片查看器功能---拖动
canvas这边主要利用context.isPointInPath(x,y);这个方法来判断当前点击了哪个对象。然后就可以拖动了。具体可以看我之前的文章。
拖动的边界检测,这个主要是通过维护一个顶点的可拖动矩形实现。具体看图。
三、不足
由于我缩放是默认canvas中点在做,如果进行了拖动的话,相应放大的点就不是中点了,这怎么办?尝试了很多方法效果都不是很好。求教。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
图解:
Canvas---Canvas图像处理、图片查看器实现思路整理、拖动边界控制
原文:http://blog.csdn.net/mikuscallion/article/details/43491355