|
|
@@ -13,11 +13,31 @@
|
|
|
|
|
|
<view class="canvas">
|
|
|
<!-- 导出画布留在视口内,由白色签名画布覆盖,避免原生画布在屏幕外不渲染。 -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <canvas
|
|
|
+ id="signature-export-canvas"
|
|
|
+ class="export-canvas"
|
|
|
+ type="2d"
|
|
|
+ :style="exportCanvasStyle"
|
|
|
+ @error="handleCanvasError"
|
|
|
+ />
|
|
|
+ <canvas
|
|
|
+ id="signature-canvas"
|
|
|
+ class="drawing-canvas"
|
|
|
+ type="2d"
|
|
|
+ disable-scroll
|
|
|
+ @touchstart="onTouchStart"
|
|
|
+ @touchmove="onTouchMove"
|
|
|
+ @touchend="onTouchEnd"
|
|
|
+ @touchcancel="onTouchEnd"
|
|
|
+ @error="handleCanvasError"
|
|
|
+ />
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-WEIXIN -->
|
|
|
<canvas
|
|
|
id="signature-export-canvas"
|
|
|
canvas-id="signature-export-canvas"
|
|
|
class="export-canvas"
|
|
|
- :type="canvasType"
|
|
|
:style="exportCanvasStyle"
|
|
|
@error="handleCanvasError"
|
|
|
/>
|
|
|
@@ -25,7 +45,6 @@
|
|
|
id="signature-canvas"
|
|
|
canvas-id="signature-canvas"
|
|
|
class="drawing-canvas"
|
|
|
- :type="canvasType"
|
|
|
disable-scroll
|
|
|
@touchstart="onTouchStart"
|
|
|
@touchmove="onTouchMove"
|
|
|
@@ -33,6 +52,7 @@
|
|
|
@touchcancel="onTouchEnd"
|
|
|
@error="handleCanvasError"
|
|
|
/>
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -41,6 +61,7 @@
|
|
|
import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
|
|
|
import {
|
|
|
+ type CanvasBounds,
|
|
|
createCanvas2DSurface,
|
|
|
createLegacySurface,
|
|
|
createSignatureTasks,
|
|
|
@@ -49,7 +70,6 @@ import {
|
|
|
drawSignatureForExport,
|
|
|
getTouchPoint,
|
|
|
hasSignaturePixels,
|
|
|
- type CanvasBounds,
|
|
|
type SignaturePoint,
|
|
|
type SignatureSurface,
|
|
|
} from './signatureCanvas'
|
|
|
@@ -57,9 +77,9 @@ import {
|
|
|
const CANVAS_ID = 'signature-canvas'
|
|
|
const EXPORT_CANVAS_ID = 'signature-export-canvas'
|
|
|
const OUTPUT_WIDTH = 300
|
|
|
-let canvasType: '2d' | undefined
|
|
|
+let usesCanvas2D = false
|
|
|
// #ifdef MP-WEIXIN
|
|
|
-canvasType = '2d'
|
|
|
+usesCanvas2D = true
|
|
|
// #endif
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
@@ -96,7 +116,7 @@ const queryCanvas = (id: string) =>
|
|
|
if (instance?.proxy) query.in(instance.proxy)
|
|
|
query
|
|
|
.select(`#${id}`)
|
|
|
- .fields({ node: canvasType === '2d', size: true, rect: true }, (result) => {
|
|
|
+ .fields({ node: usesCanvas2D, size: true, rect: true }, (result) => {
|
|
|
if (!result || Array.isArray(result) || !result.width || !result.height) {
|
|
|
reject(new Error('签名画布未就绪,请点击重签重试'))
|
|
|
return
|
|
|
@@ -129,9 +149,9 @@ const initializeCanvas = async () => {
|
|
|
|
|
|
let drawingSurface: SignatureSurface
|
|
|
let outputSurface: SignatureSurface
|
|
|
- if (canvasType === '2d') {
|
|
|
+ if (usesCanvas2D) {
|
|
|
if (!info.node || !exportInfo.node) {
|
|
|
- throw new Error('当前微信无法初始化签名画布,请更新微信后重试')
|
|
|
+ throw new Error('签名画布初始化失败,请点击重签重试')
|
|
|
}
|
|
|
const pixelRatio = uni.getWindowInfo().pixelRatio || 1
|
|
|
drawingSurface = createCanvas2DSurface(info.node, info.width!, info.height!, pixelRatio)
|