近期做一个项目,需要用到图谱,引用了relation-graph开源库,由于我的软件界面都是半透明的,发现库的背景默认是白色的,库也没有暴露方法出来修改背景颜色的,于是直接修改libs的dist代码,把默认白色背景给去掉,重新编译完美运行,
正在我高兴的给客户去验收的时候,发现客户在触摸屏设备上,不能拖动节点。在电脑上用鼠标又是正常的,后面我直接下载了源码,经过排查,发生是mousedown事件只有鼠标操作才有回调,在移动端得用另外一个方法touchstart去替代。
关键主要代码如下:
startDrag(e, positionModel, ondraged,isApp) {
__ondraged = ondraged
if (isApp){
e.clientX=e.changedTouches[0].clientX
e.clientY=e.changedTouches[0].clientY
}
console.log('startDrag:', __tmp_basePosition, e)
__tmp_positionModel = positionModel
__start_info.x = __tmp_positionModel.x
__start_info.y = __tmp_positionModel.y
__tmp_basePosition.x = parseInt(__tmp_positionModel.x) - e.clientX
__tmp_basePosition.y = parseInt(__tmp_positionModel.y) - e.clientY
document.body.addEventListener('mousemove', SeeksRGUtils.onNodeMove)
document.body.addEventListener('mouseup', SeeksRGUtils.onNodeDragend)
if (isApp){
document.body.addEventListener('touchend', SeeksRGUtils.onNodeDragend)
document.body.addEventListener('touchmove', SeeksRGUtils.onNodeMove)
}
完整代码下载地址: