Comment implémenter des graffitis dans l'applet WeChat

Cet article présente principalement la fonction graffiti implémentée par l'applet WeChat, impliquant la réponse aux événements de l'applet WeChat et les compétences opérationnelles associées du pinceau. Il est également livré avec le code source que les lecteurs peuvent télécharger et consulter. référez-vous à lui

Cet article décrit la fonction graffiti implémentée par l'applet WeChat. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Fichier de mise en page index.wxml :

<view class="container">
  <!--画布区域-->
  <view class="canvas_area">
    <!--注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作-->
    <canvas canvas-id="myCanvas" class="myCanvas"
      disable-scroll="false"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd">
    </canvas>
  </view>
  <!--画布工具区域-->
  <view class="canvas_tools">
    <view class="box box1" bindtap="penSelect" data-param="5"></view>
    <view class="box box2" bindtap="penSelect" data-param="15"></view>
    <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
    <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
    <view class="box box5" bindtap="clearCanvas"></view>
  </view>
</view>

Fichier de fonctions logiques index.js :

Page({
 data:{
  pen : 3, //画笔粗细默认值
  color : '#cc0033' //画笔颜色默认值
 },
 startX: 0, //保存X坐标轴变量
 startY: 0, //保存X坐标轴变量
 isClear : false, //是否启用橡皮擦标记
 //手指触摸动作开始
 touchStart: function (e) {
   //得到触摸点的坐标
   this.startX = e.changedTouches[0].x
   this.startY = e.changedTouches[0].y
   this.context = wx.createContext()
   if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
     this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果 
     this.context.setLineCap('round') //设置线条端点的样式
     this.context.setLineJoin('round') //设置两线相交处的样式
     this.context.setLineWidth(20) //设置线条宽度
     this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
     this.context.beginPath() //开始一个路径 
     this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一个弧形路径到当前路径，顺时针绘制 这里总共画了360度 也就是一个圆形 
     this.context.fill(); //对当前路径进行填充
     this.context.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
   }else{
     this.context.setStrokeStyle(this.data.color)
     this.context.setLineWidth(this.data.pen)
     this.context.setLineCap('round') // 让线条圆润 
     this.context.beginPath()
   }
 },
 //手指触摸后移动
 touchMove: function (e) {
   var startX1 = e.changedTouches[0].x
   var startY1 = e.changedTouches[0].y
   if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
    this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
    this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点，但不创建线条
    this.context.lineTo(startX1,startY1); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
    this.context.stroke(); //对当前路径进行描边
    this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
    this.startX = startX1;
    this.startY = startY1;
   }else{
    this.context.moveTo(this.startX, this.startY)
    this.context.lineTo(startX1, startY1)
    this.context.stroke()
    this.startX = startX1;
    this.startY = startY1;
   }
   //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
   wx.drawCanvas({
     canvasId: &#39;myCanvas&#39;,
     reserve: true,
     actions: this.context.getActions() // 获取绘图动作数组
   })
 },
 //手指触摸动作结束
 touchEnd: function () {
 },
 //启动橡皮擦方法
 clearCanvas: function(){
   if(this.isClear){
    this.isClear = false;
   }else{
    this.isClear = true;
   }
 },
 penSelect: function(e){ //更改画笔大小的方法
  console.log(e.currentTarget);
  this.setData({pen:parseInt(e.currentTarget.dataset.param)});
  this.isClear = false;
 },
 colorSelect: function(e){ //更改画笔颜色的方法
  console.log(e.currentTarget);
  this.setData({color:e.currentTarget.dataset.param});
  this.isClear = false;
 }
})

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

À propos de la méthode jquery de chargement automatique des données

À propos de la requête ajax dans jquery (tutoriel détaillé)

Problèmes avec EventLoop en JavaScript

Problèmes avec la validation du formulaire vue dans l'élément

Comment utiliser vue2. image loupe plug-in en x?

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!