Градиент с углом с использованием Фабри c. js

Question

https://angrytools.com/gradient/image/

Как добиться угла наклона с использованием fabri c. js

Answer 1

Это вся документация, относящаяся к градиенту . На самом деле нет простого, официального способа указать угол. Вы можете написать свою собственную функцию угла, манипулируя 4 координатами градиента

var canvas = new fabri c .Canvas ("canvas");

var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 200,
  height: 200
});

rect.setGradient('fill', {
  type: 'linear',
  // You mainly need to apply a logic to these 4 values
  x1: 0,
  y1: rect.height / 2,
  x2: rect.width,
  y2: rect.height / 2,
  colorStops: {
    0: "white",
    0.5: "0f3c78",
    1: "0f3c78"
  }
});

canvas.add(rect);
canvas.renderAll();

В любом случае есть старый обсуждение, чтобы сделать его возможной особенностью фреймворка https://github.com/fabricjs/fabric.js/issues/888, также есть хорошая скрипка, демонстрирующая, как этого добиться https://jsfiddle.net/r043v/Z7Zg7/.