admin 管理员组

文章数量: 1184232

场景

在我的实际需求中要求一个可移动的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)}}}

本文标签： 中键 父组件 编程

版权声明：本文标题：告别枯燥：通过可移动Canvas与涂鸦激发你的Flash创作灵感，挑战新极限！ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1771500835a3545323.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。