如果签名时界面滚动，调整btn-group的大小和偏移量

<template>
    <view class="signature-container">
        <!-- 画布区域 -->
        <canvas :style="{left:'100rpx', width: canvasWidth, height: canvasHeight,backgroundColor:'#f1faf1' }"
            @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" canvas-id="signatureCanvas"
            class="signature-canvas"></canvas>

        <!-- 操作按钮 -->
        <view class="btn-group">
            <button @click="toback" type="default">返回</button>
            <button @click="clearSignature" type="default">清空</button>
            <button @click="saveSignature" type="primary">保存签名</button>
        </view>
    </view>
</template>

<script>
    import { pathToBase64 } from "image-tools"
    export default {
        data() {
            return {
                canvasWidth: '650rpx',
                canvasHeight: '99vh',
                signatureCtx: null,
                points: [], // 记录触摸点
            }
        },
        onLoad() {
            this.signatureCtx = uni.createCanvasContext('signatureCanvas');

        },
        methods: {
            onTouchStart(e) {
                const {
                    x,
                    y
                } = e.touches[0];
                this.points = [{
                    x,
                    y
                }];
                this.signatureCtx.beginPath();
                this.signatureCtx.moveTo(x, y);
                this.signatureCtx.setStrokeStyle('#000');
                this.signatureCtx.setLineWidth(4);
                this.signatureCtx.setLineCap('round');
                this.signatureCtx.setLineJoin('round');
            },
            onTouchMove(e) {
                const {
                    x,
                    y
                } = e.touches[0];
                this.points.push({
                    x,
                    y
                });
                this.signatureCtx.lineTo(x, y);
                this.signatureCtx.stroke();
                this.signatureCtx.draw(true);
                this.signatureCtx.moveTo(x, y);//线段不断断续续的关键

            },
            onTouchEnd() {
                if (this.points.length > 1) {
                    this.signatureCtx.draw(true); // 最后一次确认绘制

                }
            },
            clearSignature() {
                this.points = [];
                this.signatureCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
                this.signatureCtx.draw();
            },
            saveSignature() {
                if (this.points.length <= 1) {
                    uni.showToast({
                        title: "请签署您的真实姓名"
                    })
                    return
                }
                uni.canvasToTempFilePath({
                    canvasId: 'signatureCanvas',
                    success: (res) => {
                        uni.showToast({
                            title: '保存成功'
                        });
                        console.log('签名图片路径:', res.tempFilePath);
                        pathToBase64(res.tempFilePath).then(async e => {
                            let imageArr = e.split(',');
                            if (imageArr.length < 2) {
                                return;
                            }
                            let dic = {
                                "token":Eapp.localData.get("token"),
                                base64:imageArr[1]
                            }
                            let reslut = await Eapp.http.loading.post("upload@uploadImage", dic);
                            Eapp.services.noticeCenter.sendNotice('makeSign',reslut.url)
                            Eapp.window.back();
                        })
                        
                        // 可以将 res.tempFilePath 上传到服务器或赋值给某个变量
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none'
                        });
                        console.error(err);
                    }
                });
            },
            toback() {
                Eapp.window.back();
            }
        }
    }
</script>

<style scoped>
    .signature-container{
        position: fixed;
    }
    .btn-group {
        border-top: solid 1rpx #f1f1f1;
        position: absolute;
        width: 100vh;
        height: 100rpx;
        top: 50%;
        left: -50vh;
        font-size: 40rpx;
        transform: rotate(90deg) translateY(-50%) translateX(-51rpx);
        letter-spacing: 5rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
    }
</style>