赞
踩
本文实例为大家分享了微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下
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);
- },
-
- })

以上是本文全部内容,本文为小程序你猜我画部分功能,如需了解全部请留言。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。