自己实现了一个涂鸦效果,需要的可以看看,代码可以直接使用就不给下载地址了。
<!--pages/draw.wxml-->
<view class="container">
<view class="canvas_area">
<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="6">
<view class='circle'></view>
</view>
<view class="box_box2" bindtap="penSelect" data-param="20">
<view class='circle'></view>
</view>
<view class="box_box3" bindtap="colorSelect" data-param="#fe0000"></view>
<view class="box_box4" bindtap="colorSelect" data-param="#ff9900"></view>
<view class="box_box5" bindtap="clearCanvas">
<image src='/images/eraser.png'></image>
</view>
</view>
</view>
/* pages/draw.wxss */
page{
height: 100%;
}
.container {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6cfcf), color-stop(1, #c9c0c0));
}
.canvas_area {
height: 1000rpx;
width: 100%;
margin-top: 10rpx;
background-color: #d6cfcf;
}
.canvas_area .myCanvas {
height: 1000rpx;
width: 100%;
background-color: white;
}
.canvas_tools {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
background: #c9c0c0;
display: flex;
justify-content: space-between;
padding: 0;
}
.canvas_tools .box_box1 {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
margin-top: 25rpx;
margin-left: 25rpx;
background-color: #46768c;
padding: 0;
}
.canvas_tools .box_box1 .circle {
height: 6rpx;
width: 6rpx;
border-radius: 3rpx;
margin-top: 47rpx;
margin-left: 47rpx;
background-color: #00fd59;
}
.canvas_tools .box_box2 {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
margin-top: 25rpx;
margin-left: 25rpx;
background-color: #2d50b2;
padding: 0;
}
.canvas_tools .box_box2 .circle {
height: 20rpx;
width: 20rpx;
border-radius: 10rpx;
margin-top: 40rpx;
margin-left: 40rpx;
background-color: #00fd59;
}
.canvas_tools .box_box3 {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
margin-top: 25rpx;
margin-left: 25rpx;
background-color: #fe0000;
padding: 0;
}
.canvas_tools .box_box4 {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
margin-top: 25rpx;
margin-left: 25rpx;
background-color: #fea700;
padding: 0;
}
.canvas_tools .box_box5 {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
margin-top: 25rpx;
margin-left: 25rpx;
background-color: #afa99c;
padding: 0;
}
.canvas_tools .box_box5 image {
height: 60rpx;
width: 60rpx;
margin-top: 20rpx;
margin-left: 20rpx;
}
// pages/draw.js
Page({
/**
* 页面的初始数据
*/
data: {
isClear: false,
penColor: 'red',
lineWidth: 5,
},
/**
* 触摸开始
*/
touchStart: function (e) {
//得到触摸点的坐标
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createCanvasContext("myCanvas", this)
if (this.data.isClear) { //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
this.context.setStrokeStyle('#ffffff') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
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.penColor);
// 设置线条宽度
this.context.setLineWidth(this.data.lineWidth);
this.context.setLineCap('round') // 让线条圆润
this.context.beginPath()
}
},
/**
* 手指触摸后移动
*/
touchMove: function (e) {
var startX1 = e.changedTouches[0].x
var startY1 = e.changedTouches[0].y
if (this.data.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: 'myCanvas',
reserve: true,
actions: this.context.getActions() // 获取绘图动作数组
})
},
/**
* 触摸结束
*/
touchEnd: function (e) {
this.touchMove(e);
},
/**
* 画笔选择
*/
penSelect: function (options) {
var lineWidth = options.target.dataset.param;
console.log("lineWidth:" + lineWidth);
this.setData ({
isClear: false,
lineWidth: lineWidth,
});
},
/**
* 颜色选择
*/
colorSelect: function (options) {
var penColor = options.target.dataset.param;
console.log("penColor:" + penColor);
this.setData({
isClear: false,
penColor: penColor,
});
},
/**
* 清除涂鸦信息
*/
clearCanvas: function (options) {
console.log("clearCanvas");
this.setData({
isClear: true
});
}
})