feat:inputPhoneCode组件添加重置显示按钮的方法

chensiAb

2024-11-07 db036e639065504d953706db84b979e1addceaeb

 forms/userSignature/CSignatureLayer.vue

@@ -8,7 +8,7 @@
        class="c-signature-layer"
        title="手写板 / 请书写签名"
        :isOpened="layerOpened"
        :onClose="evt => null"
        :onClose="evt => handleClose()"
    >
        <view class="c-signature-layer-draw">
            <view class="size-box-top"></view>
@@ -73,10 +73,21 @@
        };
    },
    methods: {
        _initDraw() {
            this.canvasContext = Taro.createCanvasContext(this.cavId, this);
            const $container = $(this.$refs.drawing).parent();
            setTimeout(() => {
                $container.width().then(w => (this.cavWidth = w));
                $container.height().then(h => (this.cavHeight = h));
            }, 0);
        },
        $onDraw(callback) {
            this._initDraw();
            this.layerOpened = true;
            this._callback = callback;
            this.handleRestDraw();
            setTimeout(() => {
                this.handleRestDraw();
            }, 10);
        },
        handleRestDraw() {
            this.firstTouch = true;
@@ -84,6 +95,9 @@
            this.chirography = [];
            this.canvasContext.clearRect(0, 0, this.cavWidth, this.cavHeight);
            this.canvasContext.draw();
        },
        handleClose() {
            this.layerOpened = false;
        },
        handleWriteStart(evt) {
            if (evt.type != 'touchstart') {
@@ -282,7 +296,7 @@
                        point[1].r,
                        point[2].x,
                        point[2].y,
                        point[2].r
                        point[2].r,
                    );
                    this._bethelDraw(a, true);
                    point = [{ x: x, y: y, r: r }];
@@ -379,7 +393,7 @@
                    point[i].c2x,
                    point[i].c2y,
                    point[i].ex,
                    point[i].ey
                    point[i].ey,
                );
            }
            ctx.stroke();
@@ -389,43 +403,62 @@
            }
            ctx.draw(true);
        },
        _brushingGround(callback) {
            Taro.canvasToTempFilePath({
                canvasId: this.cavId,
                x: 0,
                y: 0,
                width: Math.ceil(this.cavWidth),
                height: Math.ceil(this.cavHeight),
                destWidth: Math.ceil(this.cavWidth),
                destHeight: Math.ceil(this.cavHeight),
                quality: 1,
                fileType: 'png',
                success: res => {
                    const ctx = this.canvasContext;
                    ctx.setFillStyle('#ffffff');
                    ctx.fillRect(0, 0, this.cavWidth, this.cavHeight);
                    ctx.drawImage(res.tempFilePath, 0, 0);
                    ctx.draw(false, () => {
                        callback();
                    });
                },
            });
        },
        handleSaveDraw() {
            if (this.firstTouch) {
                Tools.toast('请书写签名！');
            }
            const delta = 20;
            const clipArea = { x: 0, y: 0, w: 0, h: 0 };
            clipArea.x = Math.max(this.cutArea.left - delta, 0);
            clipArea.y = Math.max(this.cutArea.top - delta, 0);
            const realRight = Math.min(this.cutArea.right + delta, this.cavWidth);
            const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight);
            clipArea.w = realRight - clipArea.x;
            clipArea.h = realBottom - clipArea.y;
            Taro.canvasToTempFilePath({
                canvasId: this.cavId,
                x: clipArea.x,
                y: clipArea.y,
                width: clipArea.w,
                height: clipArea.h,
                destWidth: clipArea.w,
                destHeight: clipArea.h,
                quality: 0.6,
                fileType: 'jpeg',
                success: res => {
                    this._callback(res.tempFilePath);
                    this.layerOpened = false;
                },
            this._brushingGround(() => {
                const delta = 20;
                const clipArea = { x: 0, y: 0, w: 0, h: 0 };
                clipArea.x = Math.max(this.cutArea.left - delta, 0);
                clipArea.y = Math.max(this.cutArea.top - delta, 0);
                const realRight = Math.min(this.cutArea.right + delta, this.cavWidth);
                const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight);
                clipArea.w = realRight - clipArea.x;
                clipArea.h = realBottom - clipArea.y;
                Taro.canvasToTempFilePath({
                    canvasId: this.cavId,
                    x: clipArea.x,
                    y: clipArea.y,
                    width: clipArea.w,
                    height: clipArea.h,
                    destWidth: clipArea.w,
                    destHeight: clipArea.h,
                    quality: 0.6,
                    fileType: 'jpeg',
                    success: res => {
                        this._callback(res.tempFilePath);
                        this.layerOpened = false;
                    },
                });
            });
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.canvasContext = Taro.createCanvasContext(this.cavId, this);
            const $container = $(this.$refs.drawing).parent();
            setTimeout(() => {
                $container.width().then(w => (this.cavWidth = w));
                $container.height().then(h => (this.cavHeight = h));
            }, 0);
            this._initDraw();
        });
    },
};