Как заполнить диагональ в fabricjs - PullRequest
Новая
       7

Как заполнить диагональ в fabricjs

0 голосов
/ 09 января 2019

введите описание изображения здесь введите описание изображения здесь

Я использую Fabricjs. Это версия 2.4.5.

Я хочу заполнить диагональную линию с обеих сторон в разное время.

Диагональ вправо в полоску:

https://i.hizliresim.com/P1My55.png

Диагональ влево в полоску:

https://i.hizliresim.com/JZ20pQ.png

Я пробовал так заполнить каждый 0.01 белый и черный Но я не мог установить диагональ. Мой код работает, если высота изображения большая.

Чем выше высота многоугольника, тем горизонтальнее линии. 

canvas = new fabric.Canvas('canvas');
let points = [
	{x: 0, y: 0},
  {x: 300, y: 0},
	{x: 300, y: 350},
	{x: 0, y: 350}
];

let polygon = new fabric.Polygon(points, {
  fill : 'white',
  stroke : 'black',
  strokeWidth : 5,
  selectable: true,
  objectCaching: false,
  lockScalingX: true,
  lockScalingY: true,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true
});

let colorStops = {};
for (let i = 0; i <= 100; i++) {
  let key = (i / 100);
  colorStops[key] = i % 2 === 0 ? "black" : "white";
}

polygon.setGradient('fill', {
  x1: -polygon.width,
  y1: -polygon.height,
  x2: polygon.width,
  y2: polygon.height,
  colorStops: colorStops
});
    
canvas.add(polygon);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.min.js"></script>
<canvas id="canvas" width="600" height="600" class="canvas"></canvas>

Fiddle

...