手机无法滑动，有解决方案吗
coolwallet168 opened this issue · comments
手机无法滑动，有解决方案吗
改写mousemove事件 换touch事件 就可以了
试了楼上的方法，依然不能解决手机上不能滑动的问题。
额 我的已经可以了 实现了 手指滑动，长按，双指缩放，横向全屏等等·
你好，我的扣扣号是1667582186,我在jq里添加了移动端的几个事件，替换了kline.js里mousemove那里为touchmove，touchend,touchstart，但还是不行，希望能加下扣扣仔细请教下。
你好，我也有这个需求，能请教下么
我的扣扣是1298137327，谢谢了
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);
我记得 改滑动 只需要下面那一段就可以了· 注释掉的 是缩放的那一块·
你好，加了你的这些代码还是没生效，能不能加下好友请教下，真心求教，谢谢！我的扣扣1298137327
ReferenceError: $ is not defined
大哥们有谁遇到这个问题吗
我用的是作者一年前的代码，这里贴一下自己实现的移动端拖动，缩放功能：
这是作者源码：
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();
}
};