각도를 알고있는 경우 SVG 선형 그래디언트 속성 x1 y1 x2 y2를 계산 하시겠습니까?

Question

SVG에서 알 수 있듯이 각도 선형 그래디언트는 x1, x2, y1, y2 속성을 설정하는 것입니다. 그러나, 우리는 단지 각도를 얻을 경우

1. 어떻게 x1, y1, x2, y2의 결과를 계산합니까?

2.이 공식은 tan (angle) = (y2-y1)/(x2-x1)입니까? 어떻게 모든 매개 변수를 계산할 수 있습니까?

Answer 1

설정 x_i, 각도가 0 °이었고 gradientTransform 속성 (gradientTransform="rotate(angle)")에 의해 회전을 적용 할 경우 y_i,

Answer 2

당신이 필요로하는, 또는 가까운 무엇을 얻을해야 다음. 요지는 회전 영역 내에서 시작점과 끝점을 만들고 그 결과는 사용할 수있는 단위 벡터 집합 (즉, 0.0과 1.0 사이)이 될 것입니다. 여기서 inputAngle은 그라디언트를 원하는 각도입니다. JT-의 대답 오프 구축

function pointOfAngle(a) { 
    return {x:Math.cos(a), 
      y:Math.sin(a)}; 
} 

function degreesToRadians(d) { 
    return ((d * Math.PI)/180); 
} 

var eps = Math.pow(2, -52); 
var inputAngle = 45; 
var angle = (inputAngle % 360); 
var startPoint = pointOfAngle(degreesToRadians(180 - angle)); 
var endPoint = pointOfAngle(degreesToRadians(360 - angle)); 

// if you want negative values you can remove the following checks 
// but most likely it will produce undesired results 
if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps) 
    startPoint.x = 0; 

if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps) 
    startPoint.y = 0; 

if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps) 
    endPoint.x = 0; 

if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps) 
    endPoint.y = 0; 

선형 그라데이션 값이 SVG에 사용됩니다,하지만 당신은 당신의 요소 크기를 곱해야 할 수있는 방법 확실하지 ...

x1 = startPoint.x * width 
y1 = startPoint.y * height 
x2 = endPoint.x * width 
y2 = endPoint.y * height 

Answer 3

, 여기 Javascript에서 필요한 것을 정확하게 수행 할 수있는 함수. 이 함수를 호출하여 요소와 각도를 정수로 전달하십시오. 또한 선택적 인수로 "left", "right", "up", "down"을 추가했습니다.

function svg_linear_gradient_direction(element, direction){ 

    if(direction === "left"){ 

     element.setAttributeNS(null, "x1", "100%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(direction === "right"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "100%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(direction === "down"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "0%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "100%"); 

    } else if(direction === "up"){ 

     element.setAttributeNS(null, "x1", "0%"); 
     element.setAttributeNS(null, "y1", "100%"); 
     element.setAttributeNS(null, "x2", "0%"); 
     element.setAttributeNS(null, "y2", "0%"); 

    } else if(typeof direction === "number"){ 

     var pointOfAngle = function(a) { 
      return { 
       x:Math.cos(a), 
       y:Math.sin(a) 
      }; 
     } 

     var degreesToRadians = function(d) { 
      return ((d * Math.PI)/180); 
     } 

     var eps = Math.pow(2, -52); 
     var angle = (direction % 360); 
     var startPoint = pointOfAngle(degreesToRadians(180 - angle)); 
     var endPoint = pointOfAngle(degreesToRadians(360 - angle)); 

     if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps) 
      startPoint.x = 0; 

     if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps) 
      startPoint.y = 0; 

     if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps) 
      endPoint.x = 0; 

     if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps) 
      endPoint.y = 0; 

     element.setAttributeNS(null, "x1", startPoint.x); 
     element.setAttributeNS(null, "y1", startPoint.y); 
     element.setAttributeNS(null, "x2", endPoint.x); 
     element.setAttributeNS(null, "y2", endPoint.y); 
    } 
}