hospital-rescue-app-v2/uni_modules/tmx-ui/components/x-tabbar/xTabbarCanvas.uts

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;
	}
}