Ошибка компилятора об IGradientOptions с использованием setGradient на объекте Fabric - PullRequest
Новая
       17

Ошибка компилятора об IGradientOptions с использованием setGradient на объекте Fabric

1 голос
/ 05 июля 2019

Я работаю над проектом Angular и использую класс canvas библиотеки fabric.js для создания круга с градиентной заливкой.

Проблема в синтаксисе при использовании функции setGradient fabric.Oject. Я пробовал 2 способа: 1) путь, определенный в fabric-impl.d.ts, но это не работает (я получаю пустую форму). С другой стороны, использование его, как показано в примере документации , работает, но выдает ошибку компилятора.

Шаги для воспроизведения:

1) Создайте новый проект с помощью CLI (ng new)

2) Установите ткань, используя npm (nmp install fabric)

3) Установка типов ткани с использованием npm (npm install @types/fabric)

4) Создайте Canvas, создайте круг и попробуйте использовать на этом setGradient объект

Создание объекта Canvas и Circle 

        let nWidth:number = 300;
        let nHeight:number = 300;

        this.canvas = new fabric.Canvas('canvas', <any>{width: nWidth, height: nHeight, hoverCursor: 'auto'});
        let options: fabric.IObjectOptions = { left: 0, top: 0, originX: "left", originY: "top", objectCaching: false, selectable: false};      
        let circle: fabric.Circle = new fabric.Circle({radius: 150, fill: 'Blue', ...options});

setGradient, как определено в IGradientOptions

Это не работает (пустая форма), но не вызывает ошибок в компиляторе. 

circle.setGradient('fill', {
            type: 'linear',
            coords:{
            x1: 0,
            y1: 0,
            x2: circle.width,
            y2: circle.height
            },
            colorStops: {
              0: "#0000FF",
              1: "#FF0000"
            }
          });

setGradient, как показано в документации

Это работает, но выдает ошибку, показанную ниже. Единственная разница здесь заключается в том, что координаты передаются напрямую, а не с помощью опции «координаты». 

        circle.setGradient('fill', {
            type: 'linear',
            x1: 0,
            y1: 0,
            x2: circle.width,
            y2: circle.height,
            colorStops: {
              0: "#0000FF",
              1: "#FF0000"
            }
          });

Ошибка для второго метода setGradient 

 ERROR in src/app/app.component.ts(26,4): error TS2345: Argument of type '{ type: string; x1: number; y1: number; x2: number; y2: number; colorStops: { 0: string; 1: string; };
}' is not assignable to parameter of type 'IGradientOptions'.
      Object literal may only specify known properties, and 'x1' does not exist in type 'IGradientOptions'.

Я новичок с машинописным и угловатым, и это всего лишь предположение, но мне кажется, что это конфликт между фактическим модулем фабрики, который ожидает вещи одним способом, и типами фабрики, которые определены по-разному. Я проверил мой файл package.json, и это то, что у меня есть для ткани после установки: 

"@types/fabric": "^3.0.0",
"fabric": "^3.2.0",

Я пытался установить fabric 3.0.0 в соответствии с версией типов, но, похоже, это не имеет значения.

Спасибо!

1 Ответ

0 голосов
/ 15 июля 2019

ОК, это было в течение некоторого времени и никакого ответа, поэтому я просто опубликую свой обходной путь, хотя это не предпочтительное решение.

Так что я просто отредактировал интерфейс IGradientOptions в моем fabric-impl.dФайл .ts, отражающий структуру, ожидаемую fabric.js.Таким образом, ошибка компилятора исчезнет, ​​и код также будет работать.

Единственная проблема заключается в том, что мне придется делать это каждый раз, когда я использую «npm install», поскольку файл будет повторно загружен в исходное состояние.форма.Но хорошо, это не то, что вы делаете очень часто, и я полагаю, это будет исправлено в некотором обновлении файла типов в ближайшем будущем.

...