Raphael Drag + iPhone = 悲伤的相机应用

Posted

技术标签:

【中文标题】Raphael Drag + iPhone = 悲伤的相机应用【英文标题】:Raphael Drag + iPhone = Sad Camera App 【发布时间】:2012-05-07 11:49:43 【问题描述】:

此处的网络应用程序: http://www.digitaltransitions.com/visualizer/visualizer.html

这里的主要javascript: http://www.digitaltransitions.com/visualizer/visualizer.js

相关函数在visualizer.js的底部,分别命名为“dragger”、“move”和“up”。

十年前我是一名程序员,最近重新开始帮助我的公司创建一个网络应用程序,帮助我们的客户直观地了解特定镜头在特定相机上的外观。

不要介意信息墙(信息请求表);随意放入任何垃圾条目。或者您可以在window.onload 末尾添加unlock(); 功能,它会绕过信息墙屏幕直接进入应用程序。

能走到这一步,我感到非常自豪。但现在我被卡住了,一直把头撞在墙上。

我的网络应用通过了 Mac_Safari、Mac_Chrome、Mac_Firefox 的测试。但它在 iPhone4s 和 iPad1 上测试失败;焦距滑块(右上角的##mm gizmo 改变了镜头的“缩放”方式)无法正常工作。当用户抓住滑块时,有时它会正确地来回滑动,但有时它会跳到屏幕的最左侧,此时应用程序完全停止工作。

任何想法将不胜感激!

顺便说一句,如果您想知道如何创建带有验证和自定义确认页面的自定义 Google 文档表单,我的方法是从这里获得的: http://www.morningcopy.com.au

【问题讨论】:

与问题无关,但我会添加一些视觉提示(例如水平线)以指示滑块可以移动。如果我没有阅读您的问题,我不会意识到您可以移动滑块。 谢谢!我可能会这样做! 【参考方案1】:

我想说你的第一个工作是确定这是你的错误还是 Raphael 的错误。我会先用一个空方法切换你的“移动”方法,然后看看会发生什么。

另一种调试方法是在页面角落放置一个固定位置的 div,并将 x/y 值吐入其中,这样您就可以实时看到数字的样子。

我猜你在接触点的计算方式与鼠标光标位置的计算方式之间遇到了数学差异。

根据您添加的 hack,Raphael 可能会向您发送 Dx 的 NaN 值?

【讨论】:

以上是关于Raphael Drag + iPhone = 悲伤的相机应用的主要内容,如果未能解决你的问题,请参考以下文章

iOS开发Drag and Drop简介

Raphael JS:如何从 Dom 对象(Element.node)中获取 Raphael 元素?

raphael.js的使用

强大的svg操作库——Raphael

拉斐尔(Raphael)的背景

剪辑矩形区域旋转 raphael.js