微信小程序实现在线画板

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码，供大家参考，具体内容如下

1、WXML 代码

<!--index.wxml-->
<!-- 弹出框 -->
<view class='alert' hidden='{{alertShow}}' bindtap="alertClick">
<!-- catchtap 阻止冒泡事件 -->
  <view class="alert-main" catchtap='qwe'>
    <form bindsubmit='fabuProject'>
      <view class="timu qwe">
        <view>题目：</view>
        <input type="text" name="name" placeholder='1-6个字（例：中国）'/>
      </view>
      <view class="tishi qwe">
        <view>提示：</view>
        <input type="text" name="notice" placeholder='1-10个字（例：国家）'/>
      </view>
      <view class='form-btn qwe'>
        <button form-type='submit'>提交</button>
        <button form-type='reset'>重置</button>
      </view>
    </form> 
  </view>
</view>
<!-- 内容主题 -->
<view class="container">
  <!-- 头部 -->
  <view class="header d-f w100p">
    <view class="left d-f">题目《 {{project.name}} 》
    <image class="icon" bindtap="getProject" src="../../imgs/icon_refresh.png" />
    </view>
    <view class="right d-f" bindtap="diy">自己出题<image class="icon" src="../../imgs/icon_topic.png" /></view>
  </view>
  <!-- 绘图区域 -->
  <view class="canvas">
    <canvas hidden='{{!alertShow}}' class="mycanvas bxz-bb w100p" canvas-id="canvas" bindtouchstart="canvasStart" bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas>
  </view>
  <!-- 操作面板 -->
  <view class="tool_bar d-f w100p bxz-bb">
    <!-- <view class="cancel"><image class="icon" src="../../imgs/icon_cancel.png" />上一步</view> -->
    <!-- chengCancel 点击橡皮擦 -->
    <view class="cancel" bindtap="chengCancel"><image class="icon" src="../../imgs/icon_eraser.png" />橡皮擦</view>
    <view class="cancel" bindtap="clearCanvas"><image class="icon" src="../../imgs/icon_del.png" />清除</view>
  </view>
  <!-- 粗细和颜色 -->
  <view class="set_bar bxz-bb w100p">
    <!-- 粗细 -->
    <view class="linewidth_bar d-f">
      <text class="title">粗细</text>
      <view class="right_demo d-f">
      <!-- 判断橡皮擦是否被选中 -->
        <block wx:if="{{cancelChange}}">
          <view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:#fff"></view>
        </block>
        <block wx:else>
          <view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:{{color[currentColor]}};"></view>
        </block>
      </view>
    </view>
    <!-- 颜色 -->
    <view class="color_bar d-f">
      <text class="title">颜色</text>
      <view class="right_demo d-f">
        <!-- wx:for 遍历颜色 -->
        <!-- index 每一个颜色的编号 -->
        <!-- 三元运算符 判断那个颜色是被选中的 -->

        <block wx:if="{{cancelChange}}">
          <i class="iconfont icon-huabi" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
        </block>
        <block wx:else>
          <i class="iconfont icon-huabi {{index == currentColor ?'active':''}}" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
        </block>
      </view>
    </view>
  </view>

  <view class="btn">
    <button bindtap="fabu">发布作品</button>
  </view> 
</view>

2、WXSS 代码

@import 'iconfont.wxss';

.container {
  padding: 0 24rpx;
  background: #eaeaea;
}
.bxz-bb { box-sizing: border-box; }
.d-f { display: flex; }
.d-b { display: block; }
.w100p { width: 96%;margin:0 auto }
.bdrs50p { border-radius: 50%; }
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 0;
  box-sizing: border-box;
} 


.container > .header {
  justify-content: space-between;
  padding-top: 40rpx;
  padding-bottom: 32rpx;
  font-size: 30rpx;
}

.container > .header .left {
  align-items: center;
  color: #e22;
}

.container .left .icon {
  width: 44rpx;
  height: 44rpx;
}

.container > .header .right {
  align-items: center;
  color: #333;
}

.container .right .icon {
  width: 40rpx;
  height: 40rpx;
  padding-left: 18rpx;
}

.mycanvas {
  height: 700rpx;
  margin-bottom: 22rpx;
  background: #fff;
  box-shadow: 0 0 10rpx #ccc;
}
.canvas{
  height: 700rpx;
  margin-bottom: 22rpx;
  width:100%;  
}
.tool_bar {
  justify-content: space-between;
  padding: 0 12rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.tool_bar .icon {
  width: 40rpx;
  height: 40rpx;
  padding-right: 8rpx;
  vertical-align: bottom;
}
.set_bar { padding: 0 64rpx; }
.set_bar .title {
  padding-right: 30rpx;
}
.set_bar .right_demo { align-items: center; }
.color_bar .right_demo {
  justify-content: space-between;
  flex: 1;
}
.linewidth_bar .linewidth_demo {
  border: 5rpx solid transparent;
  margin: 0 22rpx;
}
.linewidth_bar .linewidth_demo.active { border-color: #fff;box-shadow: 0rpx 0rpx 10rpx orange }
.icon-huabi { font-size: 44rpx; }
.icon-huabi.active { font-size: 64rpx; }
.btn{
  margin-top:20rpx;
}
.btn button{
  border:0rpx;
  border-radius: 10rpx;
  height:80rpx;
  line-height: 80rpx;
  background: orange;
  color:#fff;
}

/* 弹出框 */
.alert{
  width:100%;
  height:100vh;
  background:rgba(0,0,0,0.3);
  position: fixed;
  left:0;
  top:100rpx;
  z-index:999;
}
.alert-main{
  width:95%;
  height:400rpx;
  position: absolute;
  left:0;
  top:20rpx;
  right:0;
  margin:auto;
  background:#fff;
}
.alert-main .qwe{
  display: flex;
  height:100rpx;
  margin:0 auto;
  margin-top:20rpx;
  line-height: 100rpx;
  width:96%;
}
.alert-main .tishi{
}
.alert-main .form-btn{
}
.alert-main input{
  width:500rpx;
  height:80rpx;
  background: #fff;
  margin: 10rpx 0;
  border:1px solid #7d7d7d;
  border-radius: 5rpx;
}
.alert-main button{
  width:200rpx;
  height:50rpx;
  text-align: center;
  line-height: 50rpx;
  margin-top:25rpx;
  margin-bottom:25rpx;
}

3、JS 代码

let app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 弹框是否显示
    alertShow:true,
    // 初始化标题
    project: '太阳',
    // 绘图线的粗细
    linewidth: [2, 3, 4, 5,6,7,8,9],
    // 当前默认的粗细
    currentLinewidth: 0,
    // 绘图的颜色
    color: ['#da1c34', '#8a3022', '#ffc3b0', '#ffa300', '#66b502', '#148bfd', '#000', '#9700c2', '#8a8989'],
    // 当前默认的颜色
    currentColor: 0,
    // 橡皮擦是否被点击
    cancelChange:false,
    // 判断是否开始绘画
    isStart:false
  },
  // 点击自己出题
  diy:function(){
    this.setData({
      "alertShow":false
    });
  },
  // 点击弹框的灰色区域
  alertClick:function(){
    this.setData({
      "alertShow": true
    });
  },
  // 改变颜色的事件
  changeColor:function(e){
    // 获取点击画笔的编号
    let colorIndex = e.currentTarget.id;
    // 修改默认的颜色编号
    this.setData({
      cancelChange: false,
      currentColor: colorIndex
    });
    // 设置颜色
    this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);
  },
  // 改变线的粗细
  changeLineWidth:function(e){
    // 获取点击粗细的编号
    let widthIndex = e.currentTarget.id;
    // 修改当前的粗细
    this.setData({ currentLinewidth:widthIndex});
    // 设置粗细
    this.mycanvas.setLineWidth(this.data.linewidth[this.data.currentLinewidth]);
  },

  // 点击橡皮擦

  chengCancel:function(){
    // 设置橡皮擦被选中
    this.setData({
      cancelChange:true
    });
    // 画笔颜色设置成白色
    this.mycanvas.setStrokeStyle("#fff");
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取题目的
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  // 获取标题的函数
 
  onShow: function () {
    

    let data = this.data;

    // 创建画板
    this.mycanvas = wx.createCanvasContext("canvas");
    // 设置线的样式
    this.mycanvas.setLineCap("round");
    this.mycanvas.setLineJoin("round");
    // 初始化颜色
    this.mycanvas.setStrokeStyle(data.color[data.currentColor]);
    // 初始化粗细
    this.mycanvas.setLineWidth(data.linewidth[data.currentLinewidth]);

  },
  // 绘画开始
  canvasStart:function(e){
    // 获取触摸点的x，y位置
    let x = e.touches[0].x;
    let y = e.touches[0].y;

    // 将画笔移动到指定坐标
    this.mycanvas.moveTo(x,y);
  },
  // 绘画进行中
  canvasMove:function(e){
    // 获取移动过程中的x,y位置
    let x = e.touches[0].x;
    let y = e.touches[0].y;
    // 指定移动的位置
    this.mycanvas.lineTo(x,y);
    // 开始画线
    this.mycanvas.stroke();
    // 将绘画绘制到canvas
    this.mycanvas.draw(true);
    // 绘制完成，将起始点进行移动
    this.mycanvas.moveTo(x,y);


  },
  // 绘画结束
  canvasEnd:function(){
    // 判断是否开始绘画
    this.setData({
      isStart:true
    });

  },
  // 清除画板
  clearCanvas:function(){
    // 清除区域
    this.mycanvas.clearRect(0,0,400,400);
    this.mycanvas.draw(true);
  },

})

以上是本文全部内容，本文为小程序你猜我画部分功能，如需了解全部请留言。

了解更多，可以查看相关课程