场景
在我的实际需求中要求一个可移动的canvas,因此我在在canvas外层加了个自己实现的可移动的弹窗父组件。要求右键移动弹窗,左键涂鸦,同时屏蔽右键菜单栏。
具体实现
父组件
当右键被按下时,执行拖拽操作
// 实现移动端拖拽
down(){
if(event.button == "2"){//0左键,1中键,2右键
var moveDiv = document.getElementById('lucky')
this.flags = true;
var touch;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = moveDiv.offsetLeft;
this.dy = moveDiv.offsetTop;
}
},
屏蔽右键菜单栏
created(){
window.oncontextmenu=function(e){
e.preventDefault();
}
},
子组件
当按下左键时,实现涂鸦
drawBegin(e) {
if(e.button == 0){//0左键,1中键,2右键
console.log("eclient",e.clientX, e.clientY)
this.setStageInfo(canvas.getBoundingClientRect())
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
this.cxt.strokeStyle = "#000"
this.cxt.beginPath()
this.cxt.moveTo(
e.clientX - this.stage_info.left,
e.clientY - this.stage_info.top,
)
let _this = this;
this.path.beginX = e.clientX - this.stage_info.left
this.path.beginY = e.clientY - this.stage_info.top
document.onmousemove = () => {
_this.drawing(event)
}
}
}