本文介绍了使用Canvas实现图片查看器的功能，包括图片的自适应缩放和自由缩放，以及拖动和边界控制。在缩放中，通过调整图片比例使其适应Canvas，自由缩放时则保持矩形比例。拖动功能利用`context.isPointInPath()`判断点击位置，并通过维护可拖动矩形进行边界检测。文章提及在拖动后如何处理放大中心点变化的问题，作者对此感到困惑并寻求解决方案。
没想到一个图片查看器花了我这么多时间，而且没做好。
现在整理下思路，然后把不足的地方记一下，日后请教他人。
基本思路：
一、图片查看器功能---缩放
要实现自由缩放，先要实现图片对canvas的自适应，就是给你一张大图片，你能够把它合理缩放后恰好绘制在canvas中。
具体做法是：例如：图片为500*500，canvas为240*320，那就取缩放宽度为240，长度为240/500*500，利用缩放宽度与长度，绘制图片即可。
然后是自由缩放，这时，你的缩小放大对象只要是一个矩形就好，然后图片去适应这个矩形，然后再利用获得的缩放宽高，绘制出放大了的图
二、图片查看器功能---拖动
canvas这边主要利用context.isPointInPath(x,y);这个方法来判断当前点击了哪个对象。然后就可以拖动了。具体可以看我之前的文章。
拖动的边界检测，这个主要是通过维护一个顶点的可拖动矩形实现。具体看图。
三、不足
由于我缩放是默认canvas中点在做，如果进行了拖动的话，相应放大的点就不是中点了，这怎么办？尝试了很多方法效果都不是很好。求教。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
图解：
本文由 CSDN
最低0.47元/天 解锁文章
扫一扫
5152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
