[英]Changing linear gradient on color picker change
我在图像上有一个默认的线性渐变,它由以下 html 和 typescript 代码设置:
<header [style.background-image]="cv2HeaderStyle('0, 0, 0, 0.1', '0, 0, 0, 0.8')"></header>
cv2HeaderStyle(rgba1: string, rgba2: string) {
return this.sanitizer.bypassSecurityTrustStyle(
`linear-gradient(to bottom, rgba(${rgba1}), rgba(${rgba2})),
url(${'../../../assets/imgs/woman-girl-silhouette-jogger-40751.jpg'})`
);
}
在一个表单中,我有一个 ngx-color-picker 的下拉菜单,允许用户更改线性渐变的 rgba 值。
<input
(colorPickerChange)="updateFirestoreColor($event)"
id="filmColorPicker"
[(colorPicker)]="color"
[style.background]="color"
[cpOutputFormat]='auto'/>
我正在使用 function 将我的 typescript 文件中的十六进制代码转换为 rgba 值,然后尝试使用新的 rgba 值设置新的 cv2HeaderStyle,但是,以下代码不起作用:
updateFirestoreColor(color) {
var setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
var setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
this.cv2HeaderStyle(setColor1WithOpacity, setColor2WithOpacity);
}
hexToRgb(hex){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',');
}
throw new Error('Bad Hex');
}
我没有任何控制台日志错误,并且控制台正在获取正确的 rgba 值
您需要在.html 中有“参数” - 或使用变量 -
<header [style.background-image]="cv2HeaderStyle(color1, color2)">
//or
<header [style.background-image]="myBackground">
在更新FirestoreColor
updateFirestoreColor(color) {
this.color1=setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
this.color2=setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
//or
const setColor1WithOpacity = this.hexToRgb(color) + ', 0.1)';
const setColor2WithOpacity = this.hexToRgb(color) + ', 0.8)';
myBackground=this.cv2HeaderStyle(setColor1WithOpacity, setColor2WithOpacity);
}
注意:不要使用“var”来声明临时变量,如果您希望更改变量的值,请使用“let”,如果该值在 function 内不再更改,请使用 const
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.