`

使用phantom-limb 模拟Touch 事件

阅读更多
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);
    }
});


3
测试

3.1
测试结果在Canvas上可以正常写字,表示通过.
在Chrome测试通过.



0
0
分享到:
评论

相关推荐

    PyPI 官网下载 | phantom-cli-0.0.0.1.tar.gz

    "Python库"标签确认了Phantom-CLI是一个用Python编写的功能集合,可以被其他Python项目导入和使用。Python因其丰富的生态系统和易读性,常被用作开发工具和库的语言。 在压缩包内,只有"phantom-cli-0.0.0.1"这一项...

    Python库 | phantom-types-0.13.0.tar.gz

    以下是一些使用`phantom-types`库的典型场景: 1. **安全的枚举**:在Python中,枚举类型(`enum`模块)可以确保枚举成员的完整性。然而,`phantom-types`可以提供更进一步的类型保护,确保枚举值仅在预期的上下文...

    OCR_Phantom_1.5.0.1105_zh_cn(简体中文OCR组件包).fzip

    福昕ocr组件包,可识别图片转换成文字

    Laravel开发-phantom-pdf

    Laravel开发-phantom-pdf 一个使用phantomjs生成PDF文件的包,它来自danielboendergaard/phantom pdf

    Phantom-Skill-Covers.rar_phantom

    本次我们将围绕“Phantom-Skill-Covers.rar_phantom”这个压缩包,详细解析v83版本开始的魅影技能,帮助玩家们更好地理解和运用这一角色。 1. 魅影的起源与背景: “Phantom”在游戏中的设定是一位擅长暗杀与潜行的...

    phantom-html2pdf, node 模块通过PhantomJS从HTML生成 pdf.zip

    phantom-html2pdf, node 模块通过PhantomJS从HTML生成 pdf 用于NodeJS的 phantom-html2pdf 使用 node 和PhantomJS进行文本转换的简单而轻量级的HTML 。安装npm install phantom-html2pdf依赖项Phant

    sphonic-phantom:替代了官方的phantom-zookeeper和phantom-test工件

    幻影替代了官方的phantom-zookeeper和phantom-test工件动机该项目旨在为官方的phantom-zookeeper和phantom-test工件提供替代品。 这些模块的设计和实现存在的问题非常严重,足以保证完全重写。 替代产品旨在解决原始...

    Python库 | phantom-cli-0.0.0.12.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:phantom-cli-0.0.0.12.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    Node.js-phantom-用于集成PhantomJS的NodeJS模块

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行编程,具有高效、异步、事件驱动的特点,广泛应用于构建网络应用和服务。PhantomJS则是一个无头浏览器,它可以全...

    phantom-testing_2.10-1.6.0.zip

    总之,"phantom-testing_2.10-1.6.0.zip" 提供了一个开源的测试工具平台,专注于util项目的测试,这将帮助开发者提升他们的测试技能,理解如何编写高质量、可维护的util工具,并参与到开源社区的合作中。通过研究...

    Phantom-EN.pdf

    ### Phantom Wireless Machine Surveillance系统知识点概览 #### 一、系统简介 **Phantom**是一款由ERBESSD INSTRUMENTS®开发的全包式电池供电无线机器监控系统。该系统以其独特的技术在全球范围内享有盛誉,能够...

    phantom-bridge:简单的PhantomJS桥

    不推荐使用幻影桥 简单的桥安装 $ npm install --save phantom-bridge用法 var path = require ( 'path' ) ;var phantomBridge = require ( 'phantom-bridge' ) ;var cp = phantomBridge ( path . join ( __dirname ...

    phantom-config:幻影配置

    幻影配置phantom-config:解析,转换,修改和生成Phantom配置文件phantom-config可以读取 .in和.setup文件。 (它们具有相同的格式。)例如,您可以: 修改配置值或注释字符串, 添加新变量或删除旧变量, 将配置...

    phantom-pool:基于通用池的PhantomJS资源池

    使用phantom.create()创建新的幻象实例可能很慢。 如果您频繁创建新实例并销毁它们,例如由于HTTP请求,则此模块可以通过保持幻像实例池处于活动状态并使其易于在请求中重复使用它们来提供帮助。 这是一个人工来...

    phantom-dc-extras:EFF的后端表单提交队列

    给phantom-dc-extras一个名称,街道地址,邮政编码和消息,剩下的工作将由它来处理: 根据常见的男性和女性名字的美国人口普查数据,猜测名字前缀(“ Mr.”或“ Ms.”)。 将地址/邮政编码地址解析为一种精确的,...

    EFI-华擎Z390-Phantom-Gaming-ITX:华擎Z390 Phantom Gamming ITX for Hackintosh的EFI

    EFI-华擎Z390-Phantom-Gaming-ITX 适用于Hackintosh的Asrock Z3​​90 Phantom Gamming ITX的EFI 操作系统版本 大苏尔11.2.2 OpenCore版本 0.6.6 硬件规格 物品 品牌 评论 中央处理器 母板 BIOS版本 4.40摄氏度 ...

    phantom-check:使用 phantomjs 检查您的页面是否存在 javascript 错误、断开的链接

    phantom-check 将检查错误: JavaScript 错误 404 错误(网址损坏) 401 错误(身份验证) 它将提供正确的退出代码以在 shell 脚本中使用 为什么? wget,curl 等.. 没有得到 js 错误 seleniums/webdriver 没有...

    phantom-jasmine:Phantom.js 的 Jasmine runner

    Phantom-Jasmine 是一组简单的两个脚本,用于通过 Phantom.js ( ) 运行您的 Jasmine 测试。 第一个脚本 lib/console-runner.js 是 Jasmine 的一个插件,它通过 console.log(包含在 TestRunner.html 中的脚本标签中...

    phantom-inline-comment:可见但不影响源代码

    ( require 'phantom-inline-comment ) ( add-to-list 'load-path " YOUR PATH " ) 用法 添加/编辑幻像评论 Mx phantom-inline-comment 在光标的一行下添加或编辑一个幻像。 编辑缓冲区弹出后,您可以编写它。 然后...

Global site tag (gtag.js) - Google Analytics