在 sencha touch 中从带有背景图像的面板获取触摸坐标

发布于 2024-11-15 11:38:10 字数 387 浏览 2 评论 0原文

我正在以下面的方式使用 sencha 面板。有没有一种方法可以附加一个像触摸这样的处理程序，它可以返回触摸的坐标。

var world_map = new Ext.Panel({
            fullscreen: true,
            style: 'background-color:black',
            autoScroll:true, 
            html:'<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>'

        });

基本思想是能够检测用户触摸的点，使用这样的面板可以吗？谢谢

原文

I am working with a sencha panel in the below fashion.
Is there a way to attach a handler say like touch which can return the coordinates of the touch

var world_map = new Ext.Panel({
            fullscreen: true,
            style: 'background-color:black',
            autoScroll:true, 
            html:'<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>'

        });

The basic idea is to be able to detect the points where the user touches, is this possible using such a panel ?
thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笙痞 2024-11-22 11:38:10

这绝对是可能的，而且通过使用高级侦听器选项相当容易。技巧是在侦听器上设置 element 属性，以便将点击事件绑定到组件上的 DOM 元素。

这是 Sencha Fiddle 的一个工作示例：
https://fiddle.sencha.com/#fiddle/8ua

var world_map = new Ext.Panel({
    fullscreen: true,
    style: 'background-color:black',
    autoScroll: true,
    html: '<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>',
    listeners: [{
        event: 'tap',
        element: 'element',
        fn: function(event) {
            console.log(event);
            alert('Touch Position: ' + event.touch.pageX + ' ' + event.touch.pageY);
        }
    }]
});

This is definitely possible, and rather easy by using advanced listener options. The trick is to set the element property on the listener so that you are binding tap events to the DOM element over the component.

Here is a working example on Sencha Fiddle:
https://fiddle.sencha.com/#fiddle/8ua

var world_map = new Ext.Panel({
    fullscreen: true,
    style: 'background-color:black',
    autoScroll: true,
    html: '<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>',
    listeners: [{
        event: 'tap',
        element: 'element',
        fn: function(event) {
            console.log(event);
            alert('Touch Position: ' + event.touch.pageX + ' ' + event.touch.pageY);
        }
    }]
});

回复收藏 0 原文

~没有更多了~