html5 canvas 如何实现双指触摸局部的缩小和放大

2016-12-02 15:28:15 +08:00
 ffx0s

如题,通过给 canvas 绑定了 touch 事件,计算出了缩放的比例以及两指之间的中心点。现在就是缩放的时候 canvas 的 y 和 y 坐标的取值问题。如何以触摸的那个点为原点(origin)进行缩小放大,我要怎么计算 x 和 y 的值。如果有 demo 的话那就更好了!

8046 次点击
所在节点    JavaScript
3 条回复
MMxiao
2016-12-02 17:46:17 +08:00
http://demo.mmxiaohx.net/home/upload 一年前做的东西。 用过。 很急 一个星期 前端加后台 就一个人。 代码有点乱 主要 是用了 那个 facetouch.js 然后 具体的都是那个 app.js 里面的。 代码 很乱 很挫 误喷。
shpasspass
2016-12-02 20:41:12 +08:00
ffx0s
2016-12-11 21:59:45 +08:00
@MMxiao @shpasspass 感谢,已经解决了。在 stackoverflow 上找到了答案,参考了他们的做法实现了, http://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/324844

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX