Vue utilise Canvas pour implémenter un bloc d'écriture mobile

Cet article présente principalement la méthode de Vue utilisant Canvas pour implémenter un bloc d'écriture mobile. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Cet article présente l'utilisation. de Vue, j'aimerais partager avec vous la méthode d'utilisation de Canvas pour implémenter une tablette d'écriture manuscrite mobile, comme suit :

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

Recommandations associées :

Vue implémente le menu système qui peut être suspendu/masqué dans le coin supérieur droit de la page

Étapes pour implémenter le recadrage de vue fonction de composant d'aperçu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!