问题织物 js 为形状和背景角度应用背景颜色

Question

我在fabricjs中遇到一个问题，问题是

1. 我的当前代码具有默认背景，我可以更改背景颜色
2. 如果我放置任何对象或文本，如果我想将该对象的背景颜色更改为透明度
3. 我正在尝试更改形状颜色，但背景颜色正在改变。
4. 实际上我在下面的 html 中发现了问题，我有 props.canvasFill 我认为应该有两个参数，因为如果你看到我的 ts 代码

这是我的 HTML

**<input type="text" class="form-control" [cpPosition]="'right'" [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)="setFillColor($event)"/>**

这是我在 html 中的 ts 代码，目前它有 canvasFile 我必须使用 fill 和 canvasfill 我不知道如何使用它

 props: any = {
    canvasFill: '#ffffff',
    canvasImage: '',
    id: null,
    opacity: null,
    fill: null,
    stroke: null,
    strokeWidth: null,
    fontSize: null,
    lineHeight: null,
    charSpacing: null,
    fontWeight: null,
    fontStyle: null,
    textAlign: null,
    fontFamily: 'Open Sans',
    TextDecoration: '',
    scale: 1,
    angle: 0
};

    setFillColor(swatch: any): void {
        this.palettes.selected = swatch;
        this.props.fill = swatch.key;
        console.log(this.props.fill, '& ' ,swatch.key);
        this.setFill();
        if (!this.props.canvasImage) {
            console.log('say hi')
            this.canvas.backgroundColor = this.props.canvasFill;
            this.canvas.renderAll(); 
        };
    }

console.log(this.props.fill, '& ' ,swatch.key); i am getting Undefined & undefined 

Answer 1

swatch 是您获得的用户选择的实际颜色代码，它是字符串。

因此，当您读取swatch 的属性时，您会得到undefined，它是字符串并且字符串没有这样的key 属性。

因此，将this.props.fill = swatch.key; 行替换为this.props.fill = swatch;，您不需要第一行this.palettes.selected = swatch;，除非您在其他地方引用它。