2013-04-28 65 views
0

我在iPhone和Android上使用Kinetic JS。Kinetic JS Multi-Touch Scale Stage

我复制的例子从

http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

,使舞台缩放,然后我意识到,当我放大变焦不上,我掐我变焦的地方发生,而是发生在顶角。

我还需要用最大/最小缩放级别限制缩放比例,我相信这会有很大的帮助。谢谢!

代码:

http://pastebin.com/cAgk2UiB

改装成捏层:

http://pastebin.com/mG1b75KK

+0

setScale只调整对象/图层的大小,您必须根据计算出的触摸/捏合位置的坐标来自己翻译位置。 – SoluableNonagon 2013-04-29 13:41:08

+0

这些链接都没有工作解决方案。 Pastebin's也过期了。 – 2013-06-23 19:50:58

回答

1

这是由另一家开发商谁做插件的照顾。试试这个,看看它是否适合你

https://github.com/eduplus/pinchlayer

+0

是的,我看到了!我试过,但我的网页变成空白认为它的一些JS错误,将检查,并会在一段时间内再次尝试。感谢m8! :)! – Rejinderi 2013-04-30 01:39:09

+1

捏层不适用于最新的KineticJS,而且我的代码不能运行在PinchLayer开启的旧KineticJS上,现在修复它并且它的工作正常:)谢谢,现在问题是我有100+圆圈和缩放在iPhone 4和Android上非常慢。任何想法我可以改进它? – Rejinderi 2013-05-02 08:27:13

+0

不是真的,在移动设备上重画是昂贵的。要做的事情是以某种方式定义一个区域来重绘,而不是整个图层。 – SoluableNonagon 2013-05-02 17:35:23

0

下面是本教程的更新版本:

var scale = { 
    x: stage.scale().x * dist/lastDist, 
    y: stage.scale().y * dist/lastDist 
}; 
stage.scale(scale); 
http://jsfiddle.net/9eaBq/

这段代码只需更换从69行至71

在iOS7下使用iPad(Chrome & Safari)。