admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 🐛 修复 signature 组件设置background-color为透明色导致撤销无效 (#1224)

Browse Source 
✅ Closes: #1223
This commit is contained in:
Yau~ 2025-08-24 13:06:54 +08:00 committed by GitHub
parent 00ab76bd91
commit 2e67adf2ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
View File

@ -91,6 +91,45 @@ const canvasState = reactive({
ctx: null as UniApp.CanvasContext | null // canvas上下文
})
/**
* 判断颜色是否为透明色
* @param color 颜色值（支持 rgba/hsla/hex/transparent）
*/
function isTransparentColor(color: string | undefined): boolean {
if (!color) return true
const transparentKeywords = ['transparent', '#0000', '#00000000']
// 标准透明关键字
if (transparentKeywords.includes(color.toLowerCase())) {
return true
}
// 匹配 rgba(r, g, b, a)
const rgbaMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\)$/i)
if (rgbaMatch) {
const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
return alpha === 0
}
// 匹配 hsla(h, s, l, a)
const hslaMatch = color.match(/^hsla?\(\s*(\d+)(?:deg)?\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*(\d*\.?\d+))?\)$/i)
if (hslaMatch) {
const alpha = hslaMatch[4] ? parseFloat(hslaMatch[4]) : 1
return alpha === 0
}
// 匹配 #RRGGBBAA 或 #RGBA
const hexMatch = color.match(/^#([0-9a-f]{8}|[0-9a-f]{4})$/i)
if (hexMatch) {
const hex = hexMatch[1]
const alphaHex = hex.length === 8 ? hex.slice(6, 8) : hex.slice(3, 4).repeat(2)
const alpha = parseInt(alphaHex, 16)
return alpha === 0
}
return false
}
watch(
() => props.penColor,
() => {
@ -302,8 +341,8 @@ const redrawCanvas = () => {
if (!ctx) return
// 清除画布并设置背景
if (isDef(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor)
if (!isTransparentColor(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor as string)
ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
} else {
ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
@ -570,8 +609,8 @@ function clearCanvas() {
const { canvasWidth, canvasHeight, ctx } = canvasState
if (ctx) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
if (isDef(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor)
if (!isTransparentColor(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor as string)
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
}
ctx.draw()