微信小程序实现手指触摸画板
本文实例为大家分享了微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下
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);
},
})
以上是本文全部内容,本文为小程序你猜我画部分功能,如需了解全部请留言。