1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,210 @@
+import { xTabbarCanvasDrawProps } from "./interface.uts"
+export default class xTabbarCanvas {
+	dom : UniCanvasElement
+	ctx : CanvasRenderingContext2D
+	tuqiSize : number = 60
+	toQiSafeTop : number = 25
+	dpr : number = 0;
+	loadimgs : Image | null = null;
+	callback:()=>void = ()=>{};
+	domWidth=0
+	domHeight=0
+	domOffsetWidth=0
+	domOffsetHeight=0
+	imgObj = null as any|null;
+	safeHeight = 0
+	constructor(dom : UniCanvasElement,content:CanvasRenderingContext2D, safeHeight : number,w : number,h : number,ofw : number,ofh : number,imamp:any|null) {
+		const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
+		this.domWidth = w;
+		this.domHeight = h;
+		this.safeHeight = safeHeight
+		this.domOffsetWidth = ofw;
+		this.domOffsetHeight = ofh;
+		this.imgObj = imamp;
+		this.dpr = dpr;
+		this.dom = dom
+		this.ctx = content
+		
+	}
+	addRestoredListener(fun:()=>void){
+		this.callback = fun
+	}
+
+	/** 绘制图片背景 */
+	fillBgImage(color : string, activeIndex : number) {
+		let ctx = this.ctx;
+		ctx.save()
+		ctx.fillStyle = color
+		ctx.fillRect(0, activeIndex > -1 ? this.toQiSafeTop : 0, this.domWidth, this.domHeight)
+		ctx.restore()
+	}
+	
+	setTuQi(count : number, activeIndex : number) {
+		let t = this;
+		if (activeIndex == -1) return;
+		let width = this.dom.offsetWidth;
+		
+		let height = this.domHeight;
+		let itemwidth = width / count;
+
+		let ctx = this.ctx;
+		ctx.globalCompositeOperation = 'destination-out'
+		let space = 2
+		// ctx.fillStyle = "#ff0000"
+
+		let size = this.tuqiSize + space * 2;
+		let r = size / 2;
+		
+		
+		if (this.loadimgs != null) {
+			this.loadimgs?.remove()
+		}
+		// #ifdef APP||WEB
+		this.loadimgs = new Image(164, 70)
+		// #endif
+		// #ifdef MP-WEIXIN
+		this.loadimgs = this.imgObj
+		// #endif
+		
+		this.loadimgs!.src = '/static/tmui4xLibs/static/tabaarMasker.png'
+		let x = itemwidth * (activeIndex + 1) - itemwidth / 2
+		
+		this.loadimgs!.onload = () => {
+			
+			// #ifdef WEB
+			ctx.drawImage(t.loadimgs!, x - 82 / 2, this.toQiSafeTop, 82, 38)
+			// #endif
+			
+			// #ifdef APP-IOS
+			ctx.drawImage(t.loadimgs!, x - 84 / 2, this.toQiSafeTop, 85, 38)
+			// #endif
+			
+			// #ifdef APP-ANDROID
+			ctx.drawImage(t.loadimgs!, x - 85 / 2, this.toQiSafeTop, 86, 38)
+			// #endif
+			
+		}
+
+	}
+	setTuQiTop(color : string[], count : number, activeIndex : number) {
+		let t = this;
+		if (this.loadimgs != null) {
+			this.loadimgs = null;
+		}
+		if (activeIndex == -1) return;
+		let width = this.dom.offsetWidth;
+
+		let height = this.domHeight;
+		let itemwidth = width / count;
+
+		let ctx = this.ctx;
+		// ctx.save()
+		// ctx.fillStyle = 'red'
+		ctx.globalCompositeOperation = 'source-over'
+		ctx.clearRect(0, 0, this.domWidth, this.domHeight)
+		// ctx.fillRect(0,0,100,25)
+
+
+
+		let space = 2
+		let size = this.tuqiSize + space * 2;
+		let r = size / 2;
+		// ctx.globalCompositeOperation = 'source-atop'
+		// #ifdef APP||WEB
+		this.loadimgs = new Image(152, 50)
+		// #endif
+		// #ifdef MP-WEIXIN
+		this.loadimgs = this.imgObj
+		// #endif
+		this.loadimgs!.src = '/static/tmui4xLibs/static/tabaarMaskerTop.png'
+		let x = itemwidth * (activeIndex + 1) - itemwidth / 2
+
+		this.loadimgs!.onload = () => {
+			ctx.save()
+			ctx.drawImage(t.loadimgs!, x - 76 / 2, 0, 76, 25)
+			ctx.restore()
+			ctx.globalCompositeOperation = 'source-atop'
+			if(color.length==1){
+				ctx.fillStyle = color[0]
+			}else{
+				let liner = ctx.createLinearGradient(0, this.toQiSafeTop / 2, this.domWidth, this.toQiSafeTop / 2)
+				liner.addColorStop(0, color[1])
+				liner.addColorStop(0.5, color[2])
+				ctx.fillStyle = liner
+			}
+			ctx.fillRect(0, 0, this.domWidth, this.toQiSafeTop)
+		}
+	}
+	
+	draw(props:xTabbarCanvasDrawProps){
+		let ctx = this.ctx;
+		ctx.globalCompositeOperation = 'source-over'
+		// 向上凸起。
+		//先绘制背景。如果有凸起
+		if(props.active>-1){
+			
+			// 凸起类型。
+			if(props.tuqiType==1){
+			
+				if(props.bgType==1){
+					ctx.fillStyle = props.bgColor
+					ctx.fillRect(0, this.toQiSafeTop, this.domWidth, this.domHeight)
+				}else if(props.bgType == 2){
+					let liner = ctx.createLinearGradient(0,this.domHeight / 2 + this.toQiSafeTop, this.domWidth, this.domHeight  / 2 + this.toQiSafeTop)
+					liner.addColorStop(0, props.bgLigth[1])
+					liner.addColorStop(0.5, props.bgLigth[2])
+					ctx.fillStyle = liner
+					ctx.fillRect(0, this.toQiSafeTop, this.domWidth, this.domHeight+this.safeHeight)
+				}else if(props.bgType==3){
+					//图片
+				}
+				
+				
+				// 绘制镂空。
+				this.setTuQi(props.listCount,props.active)
+			}else if(props.tuqiType==2){
+				
+				if(props.bgType==1){
+					// 绘制镂空。
+					this.setTuQiTop([props.bgColor] as string[],props.listCount,props.active)
+					ctx.globalCompositeOperation = 'source-over'
+					ctx.fillStyle = props.bgColor
+					ctx.fillRect(0, this.toQiSafeTop, this.domWidth, this.domHeight)
+				}else if(props.bgType == 2){
+					// 绘制镂空。
+					this.setTuQiTop(props.bgLigth,props.listCount,props.active)
+					ctx.globalCompositeOperation = 'source-over'
+					let liner = ctx.createLinearGradient(0,this.domHeight / 2, this.domWidth, this.domHeight  / 2)
+					liner.addColorStop(0, props.bgLigth[1])
+					liner.addColorStop(0.5, props.bgLigth[2])
+					ctx.fillStyle = liner
+					ctx.fillRect(0, this.toQiSafeTop, this.domWidth, this.domHeight)
+				}else if(props.bgType==3){
+					//图片
+				}
+				
+			}
+			
+		}else{
+			//绘制背景类型。
+			if(props.bgType==1){
+				ctx.fillStyle = props.bgColor
+				ctx.fillRect(0, 0, this.domWidth, this.domHeight)
+			}
+			else if(props.bgType==2){
+				let liner = ctx.createLinearGradient(0,this.domHeight / 2, this.domWidth, this.domHeight  / 2)
+				liner.addColorStop(0, props.bgLigth[1])
+				liner.addColorStop(0.5, props.bgLigth[2])
+				ctx.fillStyle = liner
+				ctx.fillRect(0, 0, this.domWidth, this.domHeight)
+			}
+			else if(props.bgType==3){
+				//图片
+			}
+		}
+	}
+	destory() {
+
+		this.loadimgs = null;
+	}
+}