diff --git a/docs/component/signature.md b/docs/component/signature.md index fe9fd1af0b..91d3a7bdbc 100644 --- a/docs/component/signature.md +++ b/docs/component/signature.md @@ -457,6 +457,7 @@ onMounted(() => { | confirm-text | 确认按钮的文本 | string | - | - | | file-type | 导出图片类型 | string | png | - | | quality | 导出图片质量(0-1) | number | 1 | - | +| angle | 导出图片旋转角度 | number | 0 | - | | export-scale | 导出图片的缩放比例 | number | 1 | - | | disabled | 是否禁用签名板 | boolean | false | - | | background-color | 画板的背景色 | string | - | - | diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss b/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss index e188d32c7d..aaa9f40e92 100644 --- a/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss @@ -71,7 +71,7 @@ } @include b(checkbox) { - display: block; + display: flex; margin-bottom: $-checkbox-margin; font-size: 0; -webkit-tap-highlight-color: transparent; @@ -86,11 +86,14 @@ display: inline-block; width: $-checkbox-size; height: $-checkbox-size; + min-width: $-checkbox-size; + min-height: $-checkbox-size; + flex-shrink: 0; border: 2px solid $-checkbox-border-color; border-radius: 50%; color: $-checkbox-check-color; background: $-checkbox-bg; - vertical-align: middle; + vertical-align: top; transition: background 0.2s; box-sizing: border-box; @@ -116,9 +119,9 @@ @include e(txt) { display: inline-block; - vertical-align: middle; + vertical-align: top; line-height: 20px; - @include lineEllipsis; + @include multiEllipsis(2); } @include e(label) { diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/types.ts b/src/uni_modules/wot-design-uni/components/wd-signature/types.ts index 39336e1975..edccf8703d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-signature/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-signature/types.ts @@ -76,6 +76,14 @@ export const signatureProps = { type: Number, default: 1 }, + /** + * 在横屏的模式下保存图片的方向 + * ps:签名横向的时候 + */ + angle: { + type: Number, + default: 0 + }, /** * 是否禁用签名板 * 类型:boolean diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue index d1dfd8cfad..759bf731d9 100644 --- a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue +++ b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue @@ -81,7 +81,7 @@ const emit = defineEmits(['start', 'end', 'signing', 'confirm', 'clear']) const { translate } = useTranslate('signature') const { proxy } = getCurrentInstance() as any const canvasId = ref(`signature${uuid()}`) // canvas 组件的唯一标识符 -let canvas: null = null //canvas对象 微信小程序生成图片必须传入 +let canvas: any = null //canvas对象 微信小程序生成图片必须传入 const drawing = ref(false) // 是否正在绘制 const pixelRatio = ref(1) // 像素比 @@ -567,23 +567,66 @@ function setLine() { * canvas 绘制图片输出成文件类型 */ function canvasToImage() { - const { fileType, quality, exportScale } = props + const { fileType, quality, exportScale, angle } = props const { canvasWidth, canvasHeight } = canvasState + // 修复:所有平台都要定义exportCanvas、exportWidth、exportHeight + let exportCanvas = canvas + let exportWidth = canvasWidth + let exportHeight = canvasHeight + // #ifdef MP-WEIXIN + console.log(angle, 'angle') + if (angle && angle % 360 !== 0 && canvas) { + try { + let rad = (angle * Math.PI) / 180 + let newWidth = canvasWidth + let newHeight = canvasHeight + if (angle % 180 !== 0) { + newWidth = canvasHeight + newHeight = canvasWidth + } + // 创建离屏canvas + const offScreenCanvas = wx.createOffscreenCanvas({ + type: '2d', + width: newWidth, + height: newHeight + }) + const offContext = offScreenCanvas.getContext('2d') + offContext.save() + // 旋转中心平移 + if (angle === 90 || angle === -270) { + offContext.translate(newWidth, 0) + } else if (angle === 180 || angle === -180) { + offContext.translate(newWidth, newHeight) + } else if (angle === 270 || angle === -90) { + offContext.translate(0, newHeight) + } + offContext.rotate(rad) + // 绘制原始内容 + offContext.drawImage(canvas, 0, 0) + offContext.restore() + exportCanvas = offScreenCanvas + exportWidth = newWidth + exportHeight = newHeight + } catch (error) { + console.error('旋转画布时出错:', error) + } + } + // #endif uni.canvasToTempFilePath( { - width: canvasWidth, - height: canvasHeight, - destWidth: canvasWidth * exportScale, - destHeight: canvasHeight * exportScale, + width: exportWidth, + height: exportHeight, + destWidth: exportWidth * exportScale, + destHeight: exportHeight * exportScale, fileType, quality, canvasId: canvasId.value, - canvas: canvas, + canvas: exportCanvas, success: (res) => { const result: SignatureResult = { tempFilePath: res.tempFilePath, - width: (canvasWidth * exportScale) / pixelRatio.value, - height: (canvasHeight * exportScale) / pixelRatio.value, + width: (exportWidth * exportScale) / pixelRatio.value, + height: (exportHeight * exportScale) / pixelRatio.value, success: true } // #ifdef MP-DINGTALK @@ -594,8 +637,8 @@ function canvasToImage() { fail: () => { const result: SignatureResult = { tempFilePath: '', - width: (canvasWidth * exportScale) / pixelRatio.value, - height: (canvasHeight * exportScale) / pixelRatio.value, + width: (exportWidth * exportScale) / pixelRatio.value, + height: (exportHeight * exportScale) / pixelRatio.value, success: false } emit('confirm', result)