Created
June 1, 2011 13:38
-
-
Save ozero/1002303 to your computer and use it in GitHub Desktop.
sencha touch + pinch zoom test (raw bake
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title></title> | |
| <link rel="stylesheet" href="resources/css-debug/sencha-touch.css" type="text/css" /> | |
| <script type="text/javascript" src="resources/sencha-touch-debug.js"></script> | |
| <script> | |
| //global vals | |
| zoomCur = 1; | |
| zoomInit = 1; | |
| lenInit = 0; | |
| hogeloop = 0; | |
| Ext.setup({ | |
| icon: 'icon.png', | |
| glossOnIcon: false, | |
| tabletStartupScreen: 'tablet_startup.png', | |
| phoneStartupScreen: 'phone_startup.png', | |
| onReady: function() { | |
| //Panelを手前勝手に拡張してつくるよー | |
| var TouchImpl = Ext.extend(Ext.Panel, { | |
| fullscreen:true, | |
| //コンストラクタっすかね。 | |
| initComponent : function() { | |
| //デモ画面のタッチイベントログ表示領域 | |
| this.logger = new Ext.Panel({ | |
| id: 'logger', | |
| scroll: 'vertical', | |
| styleHtmlContent: true, | |
| html: '<span>↑んとこでマルチタッチなりくぱぁなりしてみ。ここにイベントログ流れっけぇ。</span>' | |
| }); | |
| //なにこれ。 | |
| /*this.info = new Ext.Component({ | |
| xtype: 'component', | |
| styleHtmlContent: true, | |
| scroll: 'vertical', | |
| html: '<p>はっかせーだにゃん はっかせーだにゃん</p>' | |
| });*/ | |
| //デモ画面のタッチパッド領域 | |
| this.touchPad = new TouchImpl.TouchPad({ | |
| listeners: { | |
| log: this.onLog, | |
| scope: this | |
| } | |
| }); | |
| //このプロジェクトの画面基本設定 | |
| this.layout = 'card'; | |
| this.logger.flex = 1; | |
| this.touchPad.flex = 1; | |
| //デモ画面のレイアウト | |
| this.touchCard = new Ext.Container({ | |
| layout: { | |
| type: 'vbox', | |
| align: 'stretch' | |
| }, | |
| items: [this.touchPad, this.logger] | |
| }); | |
| //トップ画面カードとデモ画面カードの2枚を初期画面として表示 | |
| this.items = [this.touchCard]; | |
| TouchImpl.superclass.initComponent.call(this); | |
| }, | |
| //ログ出力 | |
| onLog : function(type, e) { | |
| //console.log(e); | |
| var loggerEl = this.logger.body; | |
| if (!this.started) { | |
| loggerEl.select('span').remove(); | |
| this.started = true; | |
| } | |
| switch (type) { | |
| default: | |
| loggerEl.first().insertFirst({ | |
| tag: 'p', | |
| html: type, | |
| style: 'margin: 0' | |
| }); | |
| loggerEl.select('p:nth-child(50)').remove(); | |
| break; | |
| } | |
| } | |
| }); | |
| //デモ画面のタッチパッドに使うコンポーネントの定義 | |
| TouchImpl.TouchPad = Ext.extend(Ext.Component, { | |
| id: 'touchpad', | |
| //html: 'Touch here!', | |
| contentEl: 'content1', | |
| initComponent : function() { | |
| this.addEvents('log'); | |
| TouchImpl.TouchPad.superclass.initComponent.call(this); | |
| }, | |
| //描画後 | |
| afterRender: function() { | |
| //extend元の同メソッドをおもむろに実行しといてから | |
| TouchImpl.TouchPad.superclass.afterRender.call(this); | |
| // | |
| this.mon(this.el, { | |
| touchstart: this.handleEvent, | |
| touchend: this.handleEvent, | |
| touchmove: this.handleEvent, | |
| touchdown: this.handleEvent, | |
| dragstart: this.handleEvent, | |
| drag: this.handleEvent, | |
| dragend: this.handleEvent, | |
| singletap: this.handleEvent, | |
| tap: this.handleEvent, | |
| doubletap: this.handleEvent, | |
| taphold: this.handleEvent, | |
| tapcancel: this.handleEvent, | |
| swipe: this.handleEvent, | |
| pinch: this.handleEvent, | |
| pinchstart: this.handleEvent, | |
| pinchend: this.handleEvent, | |
| scope: this | |
| }); | |
| }, | |
| //タッチ時イベントのハンドラ | |
| handleEvent: function(e) { | |
| //マルチタッチズームに使うマルチタッチ開始時の2点間距離 | |
| var lenCur = 0; | |
| //ズーム率の値域制限 | |
| if(zoomCur > 100){ | |
| zoomCur = 100; | |
| } | |
| if(zoomCur < 0.005){ | |
| zoomCur = 0.005; | |
| } | |
| //なんか | |
| var logstr = ""; | |
| var el=Ext.get('unkounko'); | |
| //マルチタッチなら | |
| if(e.touches[1] != null){ | |
| //距離を出す | |
| lenCur = Math.round(Math.sqrt( | |
| (e.touches[1]['pageX'] - e.touches[0]['pageX']) | |
| *(e.touches[1]['pageX'] - e.touches[0]['pageX']) | |
| +(e.touches[1]['pageY'] - e.touches[0]['pageY']) | |
| *(e.touches[1]['pageY'] - e.touches[0]['pageY'])) | |
| ); | |
| // | |
| if( (e.type == 'pinchstart') | |
| ||(e.type == 'touchstart') | |
| ||(e.type == 'dragstart')){ | |
| //なんやら開始、系のイベントならば | |
| lenInit = lenCur;//グローバルに持たせた距離初期値に現在の距離を放り込む | |
| zoomInit = zoomCur;//前回までのイベントループ内で出た最終値をグローバルに持たせたInitに積んでおく | |
| //ログでも吐いとく | |
| logstr = "zoom[I/C]:[" + zoomInit +"/"+ zoomCur | |
| +"], len[I/C]:" + lenInit +"/"+ lenCur + "]"; | |
| this.fireEvent('log', logstr, e); | |
| }else{ | |
| //でなければ | |
| //今回のイベントループ時点での倍率を積む | |
| //いろいろ加算した結果の現在のズーム率 | |
| zoomCur = zoomInit * lenCur / lenInit; | |
| } | |
| //ログでも吐いとく | |
| logstr = hogeloop + ": " + Math.round(zoomCur*100) | |
| +"%, len[I/C]:[" + lenInit +"/"+ lenCur+"]"; | |
| this.fireEvent('log', logstr + " - " + e.type, e); | |
| //el.dom.value = Math.round(zoomCur*100); | |
| hogeloop++; | |
| } | |
| //console.log(el); | |
| } | |
| }); | |
| //以上のなにがしを動かすがよい | |
| new TouchImpl(); | |
| } | |
| }); | |
| </script> | |
| <style> | |
| /* コンテンツ表示欄独自スタイル */ | |
| body{ | |
| background-color: #eee; | |
| } | |
| .container{ | |
| background-color: #ddd; | |
| } | |
| .aa{ | |
| overflow:hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="display:none;"> | |
| <div id="content1"> | |
| <p id="unkounko">うんこ</div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment