使用jTopo绘制的拓扑图在移动端如何实现拖动、缩放?

发布于 2022-09-06 03:38:20 字数 234 浏览 23 评论 0

使用jTopo绘制的拓扑图在PC端上可以用鼠标进行拖动和缩放操作,但在移动端却无法用手指进行拖动和缩放操作,请教各位大大,有做够过类似案例吗? 指点一二平板模式下,无法拖拽,源码没看懂怎么修改

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

薄荷梦 2022-09-13 03:38:20
// 1、定义这两个函数
function touchEventToMouseEvent(event, eventType) {
        if (!event.originalEvent || !event.originalEvent.targetTouches || event.originalEvent.targetTouches.length != 1)
            return false;
        var te = event.originalEvent.targetTouches[0];
        var clientX = te.clientX, clientY = te.clientY, screenX = te.screenX, screenY = te.screenY;

        var simEvent = new MouseEvent(eventType, {
            clientX: clientX,
            clientY: clientY,
            screenX: screenX,
            screenY: screenY,
            button: 0,
            buttons: 0
        });
        return simEvent;
    }
    
function findElm(targetElement) {
        targetElement.on('touchstart', function (e) {
            console.log('touchstart');
            console.log(e);
            var simEvent = touchEventToMouseEvent(e, 'mousedown');
            if (simEvent != null) {
                $(this)[0].dispatchEvent(simEvent);
            }
        });

        targetElement.on('touchmove', function (e) {
            e.preventDefault();
            console.log('touchmove');
            var simEvent = touchEventToMouseEvent(e, 'mousemove');
            if (simEvent != null) {
                $(this)[0].dispatchEvent(simEvent);
            }
        });

        targetElement.on('touchend', function (e) {
            console.log('touchend');
            console.log(e);
            var simEvent = touchEventToMouseEvent(e, 'mouseup');
            if (simEvent != null) {
                $(this)[0].dispatchEvent(simEvent);
            }
        });
}
   
// 2、执行 findElm(selectorElement) 即可将移动端的touch
findElm(selectorElement); 
    
想你只要分分秒秒 2022-09-13 03:38:20
$(this)[0].dispatchEvent(simEvent);请问这个$(this)[0]是指什么?是指jtopo内置的场景stage?
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文