canvas橡皮擦功能
话不多说，直接上代码
<template>
<view>
<view class="wrapper">
<view class="handCenter">
<canvas class="handWriting" style="height:300px" :disable-scroll="true" @touchstart="uploadScaleStart"
@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
</view>
<view class="colorwarp">
<image @click="selectColorEvent('black','#1A1A1A')"
:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
<image @click="selectColorEvent('red','#ca262a')"
:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
</view>
<view class="">
设置橡皮擦大小
</view>
<view class="">
<slider value="5" @change="sliderChange" min="1" max="10" show-value />
</view>
<view class="warp">
<view class="" @click="retDraw">
重写
</view>
<view class="" @click="saveCanvasAsImg">
保存
</view>
<view class="" @click="previewCanvasImg">
预览
</view>
<view class="" @click="subCanvas">
完成
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
canvasName: 'handWriting',
ctx: '',
startX: null,
startY: null,
canvasWidth: 0,
canvasHeight: 0,
selectColor: 'black',
lineColor: '#1A1A1A', // 颜色
lineSize: 5, // 笔记倍数
bgColor:'#fff',
// bgImg:'../../static/ceshi.png',
bgImg:'http://maomao.judianseo.com/ceshi.png'
};
},
onLoad() {
this.ctx = uni.createCanvasContext("handWriting");
this.$nextTick(() => {
uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
this.canvasWidth = rect.width;
this.canvasHeight = rect.height;
/* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */
})
.exec();
});
},
mounted(){
this.ctxcanvas();
},
methods: {
//选择大小橡皮擦
sliderChange(e) {
console.log('value 发生变化：' e.detail.value)
this.lineSize = e.detail.value
},
ctxcanvas(){
const context = this.ctx;
const query = uni.createSelectorQuery().in(this);
query.select('.handCenter').boundingClientRect(data => {
// console.log("得到布局位置信息" JSON.stringify(data));
context.setFillStyle(this.bgColor);
context.fillRect(0, 0, data.width, data.height); //TODO context的宽和高待定
context.fill();
let img = 'http://maomao.judianseo.com/ceshi.png'
console.log(img)
context.drawImage(img, 0, 0, data.width, data.height);
context.draw();
}).exec();
},
// 笔迹开始
uploadScaleStart(e) {
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
//设置画笔参数
//画笔颜色
this.ctx.setStrokeStyle(this.lineColor)
//设置线条粗细
this.ctx.setLineWidth(this.lineSize)
//设置线条的结束端点样式
this.ctx.setLineCap("round") //'butt'、'round'、'square'
//开始画笔
this.ctx.beginPath()
},
// 笔迹移动
uploadScaleMove(e) {
//取点
let temX = e.changedTouches[0].x
let temY = e.changedTouches[0].y
//画线条
this.ctx.moveTo(this.startX, this.startY)
this.ctx.lineTo(temX, temY)
this.ctx.stroke()
this.startX = temX
this.startY = temY
this.ctx.draw(true)
},
/**
* 重写
*/
retDraw() {
this.ctx.clearRect(0, 0, 700, 730);
this.ctx.draw();
//设置canvas背景
this.ctxcanvas();
// this.setCanvasBg('#fff');
},
/**
* @param {Object} str
* @param {Object} color
* 选择颜色
*/
selectColorEvent(str, color) {
this.selectColor = str;
this.lineColor = color;
},
//完成
subCanvas() {
uni.canvasToTempFilePath({
canvasId: 'handWriting',
fileType: 'png',
quality: 1, //图片质量
success(res) {
// console.log(res.tempFilePath, 'canvas生成图片地址');
uni.showToast({
title: '以保存'
});
//保存到系统相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
uni.showToast({
title: '已成功保存到相册',
duration: 2000
});
}
});
}
});
},
//保存到相册
saveCanvasAsImg() {
uni.canvasToTempFilePath({
canvasId: 'handWriting',
fileType: 'png',
quality: 1, //图片质量
success(res) {
console.log(res.tempFilePath, 'canvas生成图片地址');
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
uni.showToast({
title: '已保存到相册',
duration: 2000
});
}
});
}
});
},
//预览
previewCanvasImg() {
uni.canvasToTempFilePath({
canvasId: 'handWriting',
fileType: 'jpg',
quality: 1, //图片质量
success(res) {
uni.previewImage({
urls: [res.tempFilePath] //预览图片 数组
});
}
});
},
//设置canvas背景色 不设置 导出的canvas的背景为透明
//@params：字符串 color
setCanvasBg(color) {
/* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */
//rect() 参数说明 矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
this.ctx.drawImage(this.bgImg, 0, 0, this.canvasWidth, this.canvasHeight)
// ctx.setFillStyle('red')
this.ctx.setFillStyle(color);
this.ctx.fill(); //设置填充
this.ctx.draw(); //开画
}
}
};
</script>
<style lang="scss" scoped>
page {
background: #fbfbfb;
height: auto;
overflow: hidden;
}
.wrapper {
width: 100%;
height: 95vh;
/* margin: 30rpx 0;
overflow: hidden;
display: flex;
align-content: center;
flex-direction: row;
justify-content: center; */
font-size: 28rpx;
}
.handWriting {
background: #fff;
width: 100%;
height: 95vh;
}
.handRight {
display: inline-flex;
align-items: center;
}
.handCenter {
border: 4rpx dashed #e9e9e9;
flex: 5;
overflow: hidden;
box-sizing: border-box;
}
.handTitle {
transform: rotate(90deg);
flex: 1;
color: #666;
}
.handBtn button {
font-size: 28rpx;
}
.handBtn {
width: 100%;
height: 95vh;
display: flex;
justify-content: space-between;
align-content: space-between;
flex: 1;
}
.delBtn {
position: absolute;
top: 250rpx;
left: 0rpx;
transform: rotate(90deg);
color: #666;
}
.subBtn {
display: inline-flex;
transform: rotate(90deg);
background: #008ef6;
color: #fff;
margin-bottom: 30rpx;
text-align: center;
justify-content: center;
}
/*Peach - 新增 - 保存*/
.saveBtn {
transform: rotate(90deg);
color: #666;
}
.previewBtn {
transform: rotate(90deg);
color: #666;
}
.uploadBtn {
transform: rotate(90deg);
color: #666;
}
/*Peach - 新增 - 保存*/
.black-select {
top: 30rpx;
left: 25rpx;
}
.black-select.color_select {
width: 60rpx;
height: 60rpx;
}
.red-select {
width: 60rpx;
height: 60rpx;
}
.red-select.color_select {
width: 60rpx;
height: 60rpx;
}
.colorwarp{
width: 100%;
height: 150rpx;
display: flex;
align-items: flex-start;
image{
width: 60rpx;
height: 60rpx;
}
}
.warp{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
view{
display: flex;
align-items: center;
justify-content: center;
width: 20%;
height: 80rpx;
background-color: #008ef6;
color: #fff;
}
}
</style>
