mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
fix: 🐛 修复 signature 组件设置background-color为透明色导致撤销无效 (#1224)
✅ Closes: #1223
This commit is contained in:
parent
00ab76bd91
commit
2e67adf2ba
@ -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()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user