kline 手机无法滑动，有解决方案吗

手机无法滑动，有解决方案吗

May 15 '18 03:05 coolwallet168

改写mousemove事件换touch事件就可以了

Jun 06 '18 11:06 xwm0660

试了楼上的方法，依然不能解决手机上不能滑动的问题。

Jun 12 '18 10:06 Johnharvy

额我的已经可以了实现了手指滑动，长按，双指缩放，横向全屏等等·

Jun 12 '18 10:06 xwm0660

你好，我的扣扣号是1667582186,我在jq里添加了移动端的几个事件，替换了kline.js里mousemove那里为touchmove，touchend,touchstart，但还是不行，希望能加下扣扣仔细请教下。

Jun 13 '18 03:06 Johnharvy

你好，我也有这个需求，能请教下么

Jun 13 '18 06:06 tool2014

我的扣扣是1298137327，谢谢了

Jun 13 '18 07:06 tool2014

block.addEventListener("touchmove", function (f) { // if(f.touches.length>=2){ // distancX2 = Math.round(Math.abs(f.touches[1].pageX-f.touches[0].pageX)); // distancY2 = Math.round(Math.abs(f.touches[1].pageY-f.touches[0].pageY)); // distance2 = Math.round(Math.sqrt((distancX2distancX2)+(distancY2distancY2))); // touchstartDis.push(distance2) // if(touchstartDis.length>2){ // var touchZj = limitArrlength(touchstartDis) // } // if(touchZj[1]>touchZj[0]){ // var resultScale = isInteger((distance2-distance)/3) // if(resultScale){ // blockScale(1) // } // }else{ // var resultScale = isInteger((distance2-distance)/3) // if(resultScale){ // blockScale(-1) // } // } // }else{ var touches = f.touches[0]; var oLeft = touches.clientX - block.offsetLeft; var oTop = touches.clientY - block.offsetTop; var d = ChartManager.getInstance(); var numth = d.getTimeline('frame0.k0').getFirstIndex(); if (tapdraw === true) { d.onMouseMove("frame0", oLeft, oTop-10, true); d.redraw("All", false) } else { $("#formTableData").show(); d.onMouseDown("frame0", oLeft, oTop-10); d.onMouseMove("frame0", oLeft, oTop-10, false); d.redraw("OverlayCanvas") } //}
}, false);

Jun 19 '18 06:06 xwm0660

我记得改滑动只需要下面那一段就可以了· 注释掉的是缩放的那一块·

Jun 19 '18 06:06 xwm0660

你好，加了你的这些代码还是没生效，能不能加下好友请教下，真心求教，谢谢！我的扣扣1298137327

Jun 20 '18 07:06 tool2014

670630268

在 2018-06-13 15:01:06，"tool2014" [email protected] 写道：

我的扣扣是1298137327，谢谢了

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

Jun 20 '18 09:06 xwm0660

ReferenceError: $ is not defined 大哥们有谁遇到这个问题吗

Jun 21 '18 03:06 LiuTW90

我用的是作者一年前的代码，这里贴一下自己实现的移动端拖动，缩放功能：这是作者源码：

document.querySelector('#chart_overlayCanvas').addEventListener('mousedown', function(e) {
        if (e.which != 1) {
            return;
        }
        KlineIns.buttonDown = true;
        var r = e.target.getBoundingClientRect();
        var x = e.clientX - r.left;
        var y = e.clientY - r.top;
        ChartManager.getInstance().onMouseDown("frame0", x, y);
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('mousemove', function(e) {
        var r = e.target.getBoundingClientRect();
        var x = e.clientX - r.left;
        var y = e.clientY - r.top;
        var mgr = ChartManager.getInstance();
        mgr.onMouseMove("frame0", x, y, KlineIns.buttonDown == true);
        // 移动鼠标时，清除画布
        mgr.redraw('All', true);
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('mouseleave', function(e) {
        var r = e.target.getBoundingClientRect();
        var x = e.clientX - r.left;
        var y = e.clientY - r.top;
        var mgr = ChartManager.getInstance();
        mgr.onMouseMove("frame0", x, y, KlineIns.buttonDown == true);
        // 移动鼠标时，清除画布
        mgr.redraw('All', true);
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('mouseup', function(e) {
        if (e.which != 1) {
            return;
        }
        KlineIns.buttonDown = false;
        var r = e.target.getBoundingClientRect();
        var x = e.clientX - r.left;
        var y = e.clientY - r.top;
        var mgr = ChartManager.getInstance();
        mgr.onMouseUp("frame0", x, y);
        mgr.redraw("All");
    }, false);

这是我改成的移动端代码：

document.querySelector('#chart_overlayCanvas').addEventListener('touchstart', function(e) {
        KlineIns.buttonDown = true;
        if (e.touches.length > 1) {
            dbtouchmove(e);
        } else {
            var r = e.target.getBoundingClientRect();
            var x = e.changedTouches[0].clientX - r.left;
            var y = e.changedTouches[0].clientY - r.top;
            ChartManager.getInstance().onMouseDown("frame0", x, y);
        }
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('touchmove', function(e) {
        if (e.touches.length > 1) {
            dbtouchmove(e);
        } else {
            var r = e.target.getBoundingClientRect();
            var x = e.changedTouches[0].clientX - r.left;
            var y = e.changedTouches[0].clientY - r.top;
            var mgr = ChartManager.getInstance();
            mgr.onMouseMove("frame0", x, y, KlineIns.buttonDown == true);
            // 移动鼠标时，清除画布
            mgr.redraw('All', true);
        }
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('touchcancle', function(e) {
        KlineIns.buttonDown = false;
        if (e.touches.length == 1) {
            var r = e.target.getBoundingClientRect();
            var x = e.changedTouches[0].clientX - r.left;
            var y = e.changedTouches[0].clientY - r.top;
            var mgr = ChartManager.getInstance();
            mgr.onMouseMove("frame0", x, y, KlineIns.buttonDown == true);
            // 移动鼠标时，清除画布
            mgr.redraw('All', true);
        }
    }, false);
    document.querySelector('#chart_overlayCanvas').addEventListener('touchend', function(e) {
        KlineIns.buttonDown = false;
        if (e.touches.length == 1) {
            var r = e.target.getBoundingClientRect();
            var x = e.changedTouches[0].clientX - r.left;
            var y = e.changedTouches[0].clientY - r.top;
            var mgr = ChartManager.getInstance();
            mgr.onMouseUp("frame0", x, y);
            mgr.redraw("All");
        }
    }, false);

有一个自己写的移动端双指缩放方法： dbtouchmove

function dbtouchmove(e) {
    var hand = e.touches;
    switch (e.type) {
        case 'touchstart':
            KlineIns.baseScale = ChartManager.getInstance().getTimeline('frame0.k0')._scale;
            KlineIns.touches = {};
            KlineIns.touches.start = [{
                    x: hand[0].clientX,
                    y: hand[0].clientY,
                },
                {
                    x: hand[1].clientX,
                    y: hand[1].clientY
                }
            ]
            break;
        case 'touchmove':
            KlineIns.touches.end = [{
                    x: hand[0].clientX,
                    y: hand[0].clientY,
                },
                {
                    x: hand[1].clientX,
                    y: hand[1].clientY
                }
            ];


            // 计算两点距离
            // 两点之间原始距离
            var distanceStart = getDBhandleDistance(KlineIns.touches.start);
            var distanceEnd = getDBhandleDistance(KlineIns.touches.end);
            var moveScale = (distanceEnd - distanceStart) / distanceStart;
            var scale = distanceEnd / distanceStart;
            var result = 0;
            if (KlineIns.baseScale == 0) {
                if (scale > 1) {
                    result = Math.ceil(scale);
                }
            } else {
                result = scale > 1 ? Math.ceil(KlineIns.baseScale * scale) : Math.round(KlineIns.baseScale * scale);
            }
            if (result <= 16) {
                ChartManager.getInstance().scale(result, 'mobile');
                ChartManager.getInstance().redraw("All", true);
            }
            break;
        default:
            break;
    }
    e.stopPropagation();
    e.preventDefault();
}

function getDBhandleDistance(points) {
    // [{x:1,y:1},{x:1,y:1}]
    var distanceX = Math.abs(points[0].x - points[1].x);
    var distanceY = Math.abs(points[0].y - points[1].y);
    var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
    return distance;
}

其中有一句：ChartManager.getInstance().scale(result, 'mobile');，我自己加了一个参数'mobile',找到这个scale方法：原方法：

ChartManager.prototype.scale = function(s,) {
    if (this._highlightedFrame == null) {
        return;
    }
    var hiArea = this._highlightedFrame.getHighlightedArea();
    if (this.getRange(hiArea.getName()) != undefined) {
        var dsName = hiArea.getDataSourceName();
        var timeline = this.getTimeline(dsName);
        if (timeline != null) {
            timeline.scale(s);
            this.updateRange(dsName);
        }
    }
};
Timeline.prototype.scale = function(s) {
    this._scale += s;
    if (this._scale < 0) {
        this._scale = 0;
    } else if (this._scale >= Timeline._ItemWidth.length) {
        this._scale = Timeline._ItemWidth.length - 1;
    }
    this.updateMaxItemCount();
    if (this._selectedIndex >= 0) {
        this.validateSelectedIndex();
    }
};

改造：

ChartManager.prototype.scale = function(s, isMobile) {
    if (this._highlightedFrame == null) {
        return;
    }
    var hiArea = this._highlightedFrame.getHighlightedArea();
    if (this.getRange(hiArea.getName()) != undefined) {
        var dsName = hiArea.getDataSourceName();
        var timeline = this.getTimeline(dsName);
        if (timeline != null) {
            timeline.scale(s, isMobile);
            this.updateRange(dsName);
        }
    }
};
Timeline.prototype.scale = function(s, isMobile) {
    if (isMobile === undefined) {
        this._scale += s;
    } else {
        this._scale = s;
    }
    if (this._scale < 0) {
        this._scale = 0;
    } else if (this._scale >= Timeline._ItemWidth.length) {
        this._scale = Timeline._ItemWidth.length - 1;
    }
    this.updateMaxItemCount();
    if (this._selectedIndex >= 0) {
        this.validateSelectedIndex();
    }
};

Aug 29 '18 06:08 jsoncode

kline kline copied to clipboard

手机无法滑动，有解决方案吗

kline
kline copied to clipboard