两种方法合二为一 - angular
two method make it in one single method - angular
因为我有两种方法,所以我想把它变成一种方法。
例如
我有两种颜色,一种是改变背景颜色,另一种是改变形状颜色。
我想的不是背景颜色,而是我希望形状颜色成为背景和形状的地址。
这是我的 TS 代码
setCanvasFill(): void {
if (!this.props.canvasImage) {
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
}
}
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
}
这是我的 HTML 背景颜色
<div class="custom-item" *ngIf="!props.canvasImage">
<div class="custom-item-title">Background color</div>
<div class="custom-item-body">
<input type="text" class="form-control" [cpPosition]="'left'" [cpPresetColors]="customColors" [cpOKButton]="true" [cpAddColorButtonText]="'Speichern'" [cpAddColorButton]="true" [cpOKButtonClass]="'btn btn-light btn-sm'" [cpSaveClickOutside]="false" [(colorPicker)]="props.canvasFill"
[style.background]="props.canvasFill" [value]="props.canvasFill" (cpPresetColorsChange)="updateColorPresets($event)"
(colorPickerChange)="setCanvasFill()"/>
</div>
</div>
这是我的 html 形状颜色
<div class="panel panel-default panel-palettes no-select">
<div class="panel-heading">Color palette</div>
<div class="panel-body max-height">
<ul class="list-inline">
<li class="color-swatch" *ngFor="let p of palettes.defaults" title="{{p.value}}" (click)="setFillColor(p)"
[ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">
</li>
</ul>
<ul class="color-swatch-custom list-inline">
<li class="color-swatch" *ngFor="let p of palettes.custom" title="{{p.value}}" (click)="setFillColor(p)"
[ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}"> </li>
</ul>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-sm pull-right" role="group" aria-label="
Color palette actions"
[ngClass]="{'btn-group-disabled': palettes.selected === null}">
<button ngbTooltip="Clear color" title="Clear color" type="button"
class="btn btn-default" [disabled]="palettes.selected === null || palettes.selected.type !== undefined"
(click)="removeSelectedColorSwatch();"><i
class="fa fa-trash text-danger"
aria-hidden="true"></i>
</button>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- /Panel: Color Palettes -->
我正在尝试这样
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
this.setCanvasFill();
}
setCanvasFill(): void {
if (!this.props.canvasImage) {
console.log('say hi')
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
}
}
我正在获取日志,但颜色不适用
这是你想要的吗?
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
if (!this.props.canvasImage) {
console.log('say hi')
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
};
}
因为我有两种方法,所以我想把它变成一种方法。
例如
我有两种颜色,一种是改变背景颜色,另一种是改变形状颜色。
我想的不是背景颜色,而是我希望形状颜色成为背景和形状的地址。
这是我的 TS 代码
setCanvasFill(): void {
if (!this.props.canvasImage) {
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
}
}
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
}
这是我的 HTML 背景颜色
<div class="custom-item" *ngIf="!props.canvasImage">
<div class="custom-item-title">Background color</div>
<div class="custom-item-body">
<input type="text" class="form-control" [cpPosition]="'left'" [cpPresetColors]="customColors" [cpOKButton]="true" [cpAddColorButtonText]="'Speichern'" [cpAddColorButton]="true" [cpOKButtonClass]="'btn btn-light btn-sm'" [cpSaveClickOutside]="false" [(colorPicker)]="props.canvasFill"
[style.background]="props.canvasFill" [value]="props.canvasFill" (cpPresetColorsChange)="updateColorPresets($event)"
(colorPickerChange)="setCanvasFill()"/>
</div>
</div>
这是我的 html 形状颜色
<div class="panel panel-default panel-palettes no-select">
<div class="panel-heading">Color palette</div>
<div class="panel-body max-height">
<ul class="list-inline">
<li class="color-swatch" *ngFor="let p of palettes.defaults" title="{{p.value}}" (click)="setFillColor(p)"
[ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">
</li>
</ul>
<ul class="color-swatch-custom list-inline">
<li class="color-swatch" *ngFor="let p of palettes.custom" title="{{p.value}}" (click)="setFillColor(p)"
[ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}"> </li>
</ul>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-sm pull-right" role="group" aria-label="
Color palette actions"
[ngClass]="{'btn-group-disabled': palettes.selected === null}">
<button ngbTooltip="Clear color" title="Clear color" type="button"
class="btn btn-default" [disabled]="palettes.selected === null || palettes.selected.type !== undefined"
(click)="removeSelectedColorSwatch();"><i
class="fa fa-trash text-danger"
aria-hidden="true"></i>
</button>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- /Panel: Color Palettes -->
我正在尝试这样
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
this.setCanvasFill();
}
setCanvasFill(): void {
if (!this.props.canvasImage) {
console.log('say hi')
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
}
}
我正在获取日志,但颜色不适用
这是你想要的吗?
setFillColor(swatch: any): void {
this.palettes.selected = swatch;
this.props.fill = swatch.key;
this.setFill();
if (!this.props.canvasImage) {
console.log('say hi')
this.canvas.backgroundColor = this.props.canvasFill;
this.canvas.renderAll();
};
}