tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: web backgroundColor support GradientColor

Browse Source
This commit is contained in:
钱泽虹
2023-08-25 17:58:05 +08:00
committed by osborn
parent 52456165ce
commit 1b60ce87a9
3 changed files with 118 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
doric-web/src/shader/DoricViewNode.ts
View File

@@ -58,6 +58,14 @@ export interface DVModel {
},
}
export interface GradientType {
start?: number;
end?: number;
colors?: number[];
locations?: number[];
orientation?: number;
}
export abstract class DoricViewNode {
viewId = ""
viewType = "View"
@@ -261,7 +269,8 @@ export abstract class DoricViewNode {
this.frameHeight = prop as number
break
case 'backgroundColor':
this.backgroundColor = prop as number
this.backgroundColor = prop
break
case 'layoutConfig':
const layoutConfig = prop
@@ -367,8 +376,60 @@ export abstract class DoricViewNode {
}
}
set backgroundColor(v: number) {
this.applyCSSStyle({ backgroundColor: toRGBAString(v) })
set backgroundColor(v: number | GradientType) {
console.log('background')
if (typeof v === 'number') {
this.applyCSSStyle({ backgroundColor: toRGBAString(v) });
} else {
let colorsParam:string[] = []
const {start, end, colors, locations, orientation = 0} = v
if (colors) {
colorsParam = colors.map((c:number) => {
return toRGBAString(c)
})
} else if (start && end){
colorsParam.push(...[toRGBAString(start), toRGBAString(end)])
}
switch (orientation) {
case 1 :
this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom left, ${this.generateGradient(colorsParam, locations)})` })
break
case 2:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to left, ${this.generateGradient(colorsParam, locations)})` })
break
case 3:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to top left, ${this.generateGradient(colorsParam, locations)})` })
break
case 4:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to top, ${this.generateGradient(colorsParam, locations)})` })
break
case 5:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to top right, ${this.generateGradient(colorsParam, locations)})` })
break
case 6:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to right, ${this.generateGradient(colorsParam, locations)})` })
break
case 7:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom right, ${this.generateGradient(colorsParam, locations)})` })
break
default:
this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom, ${this.generateGradient(colorsParam, locations)})` })
break
}
}
}
generateGradient(colors: string[], locations?:number[]) {
if (!locations) {
return colors.join(', ')
}
if (colors.length !== locations.length) {
throw new Error("Colors and locations arrays must have the same length.");
}
const gradientStops = colors.map((color, index) => `${color} ${locations[index] * 100}%`);
return gradientStops.join(", ");
}
static create(context: DoricContext, type: string) {
@@ -488,7 +549,7 @@ export abstract class DoricViewNode {
return this.view.style.backgroundColor
}
setBackgroundColor(v: number) {
setBackgroundColor(v: number | GradientType) {
this.backgroundColor = v
}