From a250b6216753cfd0c0622a1fbc0f3254fc8e0a4f Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 19 Mar 2024 18:39:44 +0800
Subject: [PATCH] 图片预览组件，支持图片显示
---
forms/userSignature/CSignatureLayer.vue | 81 +++++++++++++++++++++++++++-------------
1 files changed, 55 insertions(+), 26 deletions(-)
diff --git a/forms/userSignature/CSignatureLayer.vue b/forms/userSignature/CSignatureLayer.vue
index 1deac9d..0d9c676 100644
--- a/forms/userSignature/CSignatureLayer.vue
+++ b/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>
@@ -85,7 +85,9 @@
this._initDraw();
this.layerOpened = true;
this._callback = callback;
- this.handleRestDraw();
+ setTimeout(() => {
+ this.handleRestDraw();
+ }, 10);
},
handleRestDraw() {
this.firstTouch = true;
@@ -93,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') {
@@ -291,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 }];
@@ -388,7 +393,7 @@
point[i].c2x,
point[i].c2y,
point[i].ex,
- point[i].ey
+ point[i].ey,
);
}
ctx.stroke();
@@ -398,32 +403,56 @@
}
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;
+ },
+ });
});
},
},
--
Gitblit v1.9.1