FabricJS 그래디언트 색상 값

Question

fabricJS에서 다양한 모양과 값으로 그라디언트 색상을 사용하려고했는데 (10,0,0,0)과 colorStops={0:'red',1:'black'}을 검은 색으로하고 그라디언트를 적용하면 시작하는 값이 (x1,y1,x2,y2) 인 선형입니다. 그러나 내가 도형의 오른쪽에서 시작하여 (0,0,10,0) 또는 colorStops={0:'black',1:'red'} [색상 전환]을 할 수 있지만 값 (그래디언트 범위)이 같지 않아야합니다.

x1의 값이 10이면 x2 = 10 일 때보 다 더 많습니다. (top,right,bottom,left)의 등분도 범위를 어떻게 관리 할 수 ​​있습니까?

추 신 : 오른쪽면 최대 값을 부여하려고 시도하면 모양의면이 색상 순서를 동일하게 유지하여 x2까지 150 % 더 늘어납니다. 여기 내 작업 바이올린 fiddle1 및 fiddle2

Answer 1

점은 상단되지 않은 X1, X2, Y1, Y2, 왼쪽, 아래쪽 여백입니다 색상 순서 변경에 바이올린 2입니다.

2 점 (P1 및 P2), 및 각 좌표

p1 = { x1, y1 }, p2 = { x2, y2 }. 

그들은 구배가 사는 곳의 세그먼트를 정의하는 점에 대해 설명된다.

먼저 이해해야 할 점은 색상이 변경되지 않는 방향 인 한 방향으로 무한히 확장되는 선형 그래디언트입니다.

그래서 여백을 4 개까지 줄 수는 없으며 프레임과 같이 표시 할 수 있습니다.

는 폭 (100)과 높이 (50)을 갖는 섬유 형상, RECT를 취할 경우에는이 방법으로 10 화소 마진 좌우 갖는 선형 수평 그라데이션 정의 할 수

x1: 10 
x2: WIDTH - 10 
y1: any number 
y2: the same number as y1. 

이것 그라디언트가 10에서 90까지 이동하고 첫 번째와 마지막 10 픽셀의 시작/끝 색상을 갖습니다. 색상 순서는 무엇이든간에.

당신이 수직을 원하는 경우

:

x1: any number 
x2: the same number as x2. 
y1: 10 
y2: HEIGHT - 10 

모든 좌표에 대해 서로 다른 번호를 사용하는 경우, 그라데이션 각도를 얻을 것이다 너비 또는 높이로 정렬되지 않습니다.