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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
doric-web/dist/index.js vendored
View File

@ -6457,8 +6457,59 @@ var doric_web = (function (exports, axios, sandbox) {
} }
} }
set backgroundColor(v) { set backgroundColor(v) {
console.log('background');
if (typeof v === 'number') {
this.applyCSSStyle({ backgroundColor: toRGBAString(v) }); this.applyCSSStyle({ backgroundColor: toRGBAString(v) });
} }
else {
let colorsParam = [];
const { start, end, colors, locations, orientation = 0 } = v;
if (colors) {
colorsParam = colors.map((c) => {
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, locations) {
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, type) { static create(context, type) {
const viewNodeClass = acquireViewNode(type); const viewNodeClass = acquireViewNode(type);
if (viewNodeClass === undefined) { if (viewNodeClass === undefined) {

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

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 { export abstract class DoricViewNode {
viewId = "" viewId = ""
viewType = "View" viewType = "View"
@ -261,7 +269,8 @@ export abstract class DoricViewNode {
this.frameHeight = prop as number this.frameHeight = prop as number
break break
case 'backgroundColor': case 'backgroundColor':
this.backgroundColor = prop as number this.backgroundColor = prop
break break
case 'layoutConfig': case 'layoutConfig':
const layoutConfig = prop const layoutConfig = prop
@ -367,8 +376,60 @@ export abstract class DoricViewNode {
} }
} }
set backgroundColor(v: number) { set backgroundColor(v: number | GradientType) {
this.applyCSSStyle({ backgroundColor: toRGBAString(v) }) 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) { static create(context: DoricContext, type: string) {
@ -488,7 +549,7 @@ export abstract class DoricViewNode {
return this.view.style.backgroundColor return this.view.style.backgroundColor
} }
setBackgroundColor(v: number) { setBackgroundColor(v: number | GradientType) {
this.backgroundColor = v this.backgroundColor = v
} }