Vue는 캔버스를 사용하여 모바일 필기 패드를 구현합니다.

이 글에서는 주로 Vue를 사용하여 모바일 필기 패드를 구현하는 방법을 소개합니다. 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

이 글에서는 Vue를 사용하여 모바일 필기 패드를 구현하는 방법을 소개합니다. pad.방법은 다음과 같이 모든 사람과 공유됩니다.

<template>
 <p class="hello">
<!--touchstart,touchmove,touchend,touchcancel 这-->
 <button type="" v-on:click="clear">清除</button>
 <button v-on:click="save">保存</button>
  <canvas id="canvas" width="300" height="600" style="border:1px solid black">Canvas画板</canvas>
  <img v-bind:src="url" alt="">
 </p>
 
</template>

<script>
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
  constructor(el) {
    this.el = el
    this.canvas = document.getElementById(this.el)
    this.cxt = this.canvas.getContext(&#39;2d&#39;)
    this.stage_info = canvas.getBoundingClientRect()
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    }
  }
  init(btn) {
    var that = this; 
    
    this.canvas.addEventListener(&#39;touchstart&#39;, function(event) {
      document.addEventListener(&#39;touchstart&#39;, preHandler, false); 
      that.drawBegin(event)
    })
    this.canvas.addEventListener(&#39;touchend&#39;, function(event) { 
      document.addEventListener(&#39;touchend&#39;, preHandler, false); 
      that.drawEnd()
      
    })
    this.clear(btn)
  }
  drawBegin(e) {
    var that = this;
    window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.cxt.strokeStyle = "#000"
    this.cxt.beginPath()
    this.cxt.moveTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
    canvas.addEventListener("touchmove",function(){
      that.drawing(event)
    })
  }
  drawing(e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
    this.cxt.stroke()
  }
  drawEnd() {
    document.removeEventListener(&#39;touchstart&#39;, preHandler, false); 
    document.removeEventListener(&#39;touchend&#39;, preHandler, false);
    document.removeEventListener(&#39;touchmove&#39;, preHandler, false);
    //canvas.ontouchmove = canvas.ontouchend = null
  }
  clear(btn) {
    this.cxt.clearRect(0, 0, 300, 600)
  }
  save(){
    return canvas.toDataURL("image/png")
  }
}

export default {
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;,
   val:true,
   url:""
  }
 },
 mounted() {
   draw=new Draw(&#39;canvas&#39;);
   draw.init();
 },
 methods:{
  clear:function(){
    draw.clear();
  },
  save:function(){
    var data=draw.save();
    this.url = data;
    console.log(data)
  },

　　　mutate(word) {
     this.$emit("input", word);
   },
} 
} 
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
#canvas {
 background: pink;
 cursor: default;
}
#keyword-box {
 margin: 10px 0;
}
</style>

관련 권장 사항:

Vue는 페이지 오른쪽 상단에 일시 중지/숨길 수 있는 시스템 메뉴를 구현합니다

자르기 미리보기 구성요소 기능의 Vue 구현 단계

위 내용은 Vue는 캔버스를 사용하여 모바일 필기 패드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!