Commit e8a0824f authored by 李维's avatar 李维

fixed the bug of not support touch pc

parent 13a73373
...@@ -90,6 +90,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -90,6 +90,7 @@ export class PlayComponent implements OnInit, OnDestroy {
g_formData; // 核心表单数据 g_formData; // 核心表单数据
g_teacherFlag = false; // 默认角色 g_teacherFlag = false; // 默认角色
g_currentUser; g_currentUser;
g_firstTouch = true;
// ------------------------------------ // ------------------------------------
// ------------ 私有数据 ------------ // ------------ 私有数据 ------------
...@@ -955,60 +956,76 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -955,60 +956,76 @@ export class PlayComponent implements OnInit, OnDestroy {
initListener() { initListener() {
const element = this.canvas.nativeElement;
this.g_winResizeEventStream.pipe(debounceTime(500)).subscribe(data => { this.g_winResizeEventStream.pipe(debounceTime(500)).subscribe(data => {
this.renderAfterResize(); this.renderAfterResize();
}); });
if (this.IsPC()) { const addTouchListener = () => {
this.canvas.nativeElement.addEventListener("mousedown", event => { element.addEventListener('touchstart', touchDownFunc);
setMxMyByMouse(event); element.addEventListener('touchmove', touchMoveFunc);
this.mapDown(event); element.addEventListener('touchend', touchUpFunc);
}); element.addEventListener('touchcancel', touchUpFunc);
};
this.canvas.nativeElement.addEventListener("mousemove", event => { const removeTouchListener = () => {
setMxMyByMouse(event); element.removeEventListener('touchstart', touchDownFunc);
this.mapMove(event); element.removeEventListener('touchmove', touchMoveFunc);
}); element.removeEventListener('touchend', touchUpFunc);
element.removeEventListener('touchcancel', touchUpFunc);
this.canvas.nativeElement.addEventListener("mouseup", event => {
setMxMyByMouse(event);
this.mapUp(event);
});
const setMxMyByMouse = event => {
this.g_clickX = event.offsetX;
this.g_clickY = event.offsetY;
}; };
} else {
this.canvas.nativeElement.addEventListener("touchstart", event => {
setMxMyByTouch(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener("touchmove", event => { const addMouseListener = () => {
setMxMyByTouch(event); element.addEventListener('mousedown', mouseDownFunc);
this.mapMove(event); element.addEventListener('mousemove', mouseMoveFunc);
}); element.addEventListener('mouseup', mouseUpFunc);
};
const removeMouseListener = () => {
element.removeEventListener('mousedown', mouseDownFunc);
element.removeEventListener('mousemove', mouseMoveFunc);
element.removeEventListener('mouseup', mouseUpFunc);
};
this.canvas.nativeElement.addEventListener("touchend", event => { const touchDownFunc = (e) => {
setMxMyByTouch(event); if (this.g_firstTouch) {
this.mapUp(event); this.g_firstTouch = false;
}); removeMouseListener();
}
setMxMyByTouch(e);
this.mapDown(e);
};
const touchMoveFunc = (e) => {
setMxMyByTouch(e);
this.mapMove(e);
};
const touchUpFunc = (e) => {
setMxMyByTouch(e);
this.mapUp(e);
};
this.canvas.nativeElement.addEventListener("touchcancel", event => { const mouseDownFunc = (e) => {
setMxMyByTouch(event); if (this.g_firstTouch) {
this.mapUp(event); this.g_firstTouch = false;
}); removeTouchListener();
}
setMxMyByMouse(e);
this.mapDown(e);
};
const mouseMoveFunc = (e) => {
setMxMyByMouse(e);
this.mapMove(e);
};
const mouseUpFunc = (e) => {
setMxMyByMouse(e);
this.mapUp(e);
};
const setMxMyByTouch = event => { const setMxMyByTouch = event => {
if (event.touches.length <= 0) { if (event.touches.length <= 0) {
return; return;
} }
if (this.g_canvasLeft == null) { if (this.g_canvasLeft == null) {
setParentOffset(); setParentOffset();
} }
this.g_clickX = event.touches[0].pageX - this.g_canvasLeft; this.g_clickX = event.touches[0].pageX - this.g_canvasLeft;
this.g_clickY = event.touches[0].pageY - this.g_canvasTop; this.g_clickY = event.touches[0].pageY - this.g_canvasTop;
}; };
...@@ -1018,7 +1035,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1018,7 +1035,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_canvasLeft = rect.left; this.g_canvasLeft = rect.left;
this.g_canvasTop = rect.top; this.g_canvasTop = rect.top;
}; };
}
const setMxMyByMouse = (event) => {
this.g_clickX = event.offsetX;
this.g_clickY = event.offsetY;
};
addMouseListener();
addTouchListener();
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment