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

问题描述

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

I am facing a issue in fabricjs the issue is

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 我不知道如何使用它

Here is my ts code in html curerntly it is having canvasFile i have to use fill and canvasfill I am not getting how to use that

 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

推荐答案

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

swatch is the actual color code you are getting which user has selected and it's string.

因此，当您读取 swatch 的属性(字符串和字符串没有这样的 key 属性)时，您会得到 undefined.

So you are getting undefined when you read property of swatch which is string and string does not have such key property.

因此将 this.props.fill = swatch.key; 替换为 this.props.fill = swatch; 并且您不需要第一行 this.palettes.selected = swatch; 除非你在别处引用它.

So replace line this.props.fill = swatch.key; with this.props.fill = swatch; and you don't need first line this.palettes.selected = swatch; unless you are referring it somewhere else.

这篇关于问题 Fabric js 为形状和背景角度应用背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！