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

 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

View File

@ -91,6 +91,45 @@ const canvasState = reactive({
ctx: null as UniApp.CanvasContext | null // canvas 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( watch(
() => props.penColor, () => props.penColor,
() => { () => {
@ -302,8 +341,8 @@ const redrawCanvas = () => {
if (!ctx) return if (!ctx) return
// //
if (isDef(props.backgroundColor)) { if (!isTransparentColor(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor) ctx.setFillStyle(props.backgroundColor as string)
ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight) ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
} else { } else {
ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight) ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
@ -570,8 +609,8 @@ function clearCanvas() {
const { canvasWidth, canvasHeight, ctx } = canvasState const { canvasWidth, canvasHeight, ctx } = canvasState
if (ctx) { if (ctx) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight) ctx.clearRect(0, 0, canvasWidth, canvasHeight)
if (isDef(props.backgroundColor)) { if (!isTransparentColor(props.backgroundColor)) {
ctx.setFillStyle(props.backgroundColor) ctx.setFillStyle(props.backgroundColor as string)
ctx.fillRect(0, 0, canvasWidth, canvasHeight) ctx.fillRect(0, 0, canvasWidth, canvasHeight)
} }
ctx.draw() ctx.draw()