使用phantom-limb 模拟Touch 事件

最新推荐文章于 2021-05-13 09:44:00 发布

amos_tl

最新推荐文章于 2021-05-13 09:44:00 发布

阅读量381

点赞数

分类专栏： Android 文章标签： html js ViewUI

Android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1
下载 phantom-limb.js

2.
使用

2.1
index.html


<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
<script src="../phantom-limb/phantom-limb.js" type="text/javascript"></script>
</html>

注意phantom-limb位置.

2.2
app.js


/**
 * @example miniphone
 */
Ext.application({
    name: 'App',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: '<div id="canvasCt"><canvas id="canvas" width="600" height="600" style="border: 1px solid #F00" /></div>'
        });

        var canvas = Ext.get('canvas');
        var context = canvas.dom.getContext('2d');

        context.lineWidth = 4;

        var drawer = {
            isDrawing : false,
            touchstart : function(e) {
                e.preventDefault();
                var coors = {
                    x : e.targetTouches[0].pageX,
                    y : e.targetTouches[0].pageY
                };
                context.beginPath();
                context.moveTo(coors.x, coors.y);
                this.isDrawing = true;
            }
            ,
            touchmove : function(e) {
                var coors = {
                    x : e.targetTouches[0].pageX,
                    y : e.targetTouches[0].pageY
                };
                if (this.isDrawing) {
                    context.lineTo(coors.x, coors.y);
                    context.stroke();
                }
            }
            ,
            touchend : function(e) {
                if (this.isDrawing) {
                    this.isDrawing = false;
                }
            }
        }

        // 在这里可以直接监听touch事件了.
        canvas.dom.addEventListener('touchstart', drawer.touchstart, false);
        canvas.dom.addEventListener('touchmove', drawer.touchmove, false);
        canvas.dom.addEventListener('touchend', drawer.touchend, false);
    }
});