当前位置：网站首页>canvas橡皮擦功能

canvas橡皮擦功能

2022-07-23 07:53:00 【痴心阿文】
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>