发行面料js应用背景颜色的形状和背景角度 [英] issue fabric js applying background color for shapes and background angular

问题描述

我在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 and 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 的属性，即字符串，而string不具有这样的 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.

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