javascript - 两种方法在一种方法中实现 - 角度
问题描述
因为我有两种方法,所以我想把它变成一种方法。
例如
我有两种颜色,一种用于背景颜色变化,另一种用于形状颜色。
我在想的不是背景颜色,而是我希望形状颜色同时适用于背景和形状。
这是我的 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();
};
}
推荐阅读
- c# - Web-API 版本控制不适用于默认版本
- postgresql - postgresql 根据日期列更新值
- android - 在更新回收器视图列表的数据集时,它的滚动跳回顶部(重复)
- python - 不接收带有 Python 请求的 302 状态码
- react-native - react-native android错误:开发服务器返回响应错误代码:404
- laravel - 在 Laravel Blade 中使用 Trait(组件)
- python - 求解变量子集的多元方程
- ruby-on-rails - Rails 6 alpha:Sprockets::FileNotFound
- c# - 自定义形状您的用户控件或面板
- amazon-web-services - 如何用其他 ec2 实例图像替换 ec2 图像?