Vue verwendet Canvas, um ein mobiles Handschriftpad zu implementieren

Dieser Artikel stellt hauptsächlich die Methode vor, mit der Vue ein mobiles Handschriftpad implementiert. Jetzt kann ich ihn mit Ihnen teilen.

Dieser Artikel stellt die Verwendung vor Von Vue möchte ich Ihnen die Methode zur Verwendung von Canvas zur Implementierung eines mobilen Handschrift-Tablets wie folgt mitteilen:

<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>

Verwandte Empfehlungen:

Vue implementiert das Systemmenü, das in der oberen rechten Ecke der Seite ein-/ausgeblendet werden kann

Schritte zum Implementieren der Vue-Crop-Preview-Komponente Funktion

Das obige ist der detaillierte Inhalt vonVue verwendet Canvas, um ein mobiles Handschriftpad zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!