ActionScript 3/Flash를 사용하여 선에 색상 그라디언트 적용

Question

시작과 끝 그라데이션을 사용하여 선을 동적으로 구성하려고합니다. 선이 동적이므로 GradientBox 사용을 피하고 싶습니다. 내가하고 싶은 것은 라인이 빨간색으로 시작하고 파란색으로 끝나는 것뿐입니다. 이 코드는 당신은 그라데이션의 영역이며, 어느 방향으로 색칠해야 얼마나 큰 지시하는 매트릭스를 사용할 필요가

myLine = new Shape(); 
myLine.graphics.lineStyle(2); 
myLine.graphics.lineGradientStyle(GradientType.LINEAR, [0x0000FF, 0xFF0000], [1, 1], [0, 255]); 
myLine.graphics.moveTo(itemPoint[i].x, itemPoint[i].y); // Dynamic 
myLine.graphics.lineTo(itemPoint[j].x, itemPoint[j].y); // Dynamic 
addChild(myLine); 

:(불구하고 감사합니다!

Answer 1

. 일을 따라 뭔가를 시도하지 않습니다 이 라인 :.

// Get dimensions (absolute) 
var d : Point = itemPoint[j].subtract(itemPoint[i]); 
d.x = Math.abs(d.x); 
d.y = Math.abs(d.y); 

// Create gradient box matrix 
var mtx : Matrix = new Matrix; 
mtx.createGradientBox(d.x, d.y, Math.atan2(d.y, d.x), itemPoint[j].x, itemPoint[j].y); 

myLine.graphics.lineStyle(2); 
myLine.graphics.lineGradientStyle(GradientType.LINEAR, [0x0000ff, 0xff0000], [1,1], [0, 0xff], mtx); 
myLine.graphics.moveTo(itemPoint[i].x, itemPoint[i].y); 
myLine.graphics.lineTo(itemPoint[j].x, itemPoint[j].y); 

은 기본적으로 이것은 당신이 생성 될 라인의 경계의 구형과 같은 폭과 높이가 그라데이션 상자를 만들 것입니다 그것은 또한 당신의 두 점 사이의 각도에 따라 그라데이션을 회전해야 그래디언트가 실행되는지 확인합니다. 한 지점에서 다른 지점으로.

Answer 2

리처드의 대답은 불행하게도 (그라데이션 라인과 함께 회전하지 않은) 나를 위해 작동하지 않았다, 아주 그럴듯하게 보인다.

그래서 나는 그라디언트에서 B 지점으로 기능 선 그리기를 찾고 땅의 길이와 폭을 검색했다. 한 사람이 나를 도와했고, 그래서 지금은 친애하는 선생님이 모든 질문에 대한 대답 기사단 당신과 함께 공유 할 수 있습니다

// I eliminated most of the variables in order to optimize it 
// mtx is matrix, gfx is Graphics 
public function LineGradient(pt1 : FlxPoint, pt2 : FlxPoint) : void 
{ 
    var ox : Number = Math.min(pt1.x, pt2.x); 
    var oy : Number = Math.min(pt1.y, pt2.y); 

    mtx.createGradientBox(Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y), 
          Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x), 
          ox, oy); 

    gfx.lineStyle(thickness, color, alpha); 
    gfx.lineGradientStyle(GradientType.LINEAR, [0xff0000, 0x0000ff], [0, 1], [0, 255], mtx); 

    gfx.moveTo(pt1.x, pt1.y); 
    gfx.lineTo(pt2.x, pt2.y); 
} 

지금 플래시 죽지 않을 것이다.

Answer 3

대부분이 richardolsson의 답변에서 나온 포크이지만 일반적으로이를 달성하고 줄이 곧게 뻗어있는 경우 (시작점과 끝점이 같은 x 인 경우) 버그를 수정하는 사람들에게 좀 더 일반적인 형식입니다. 이 기능은 독립형입니다.

//import flash.geom.Point; 
//import flash.display.Shape; 

var sp:Point=new Point(10,10); //some starting point - can be anywhere 
var ep:Point=new Point(250,250);// some end point - can be anywhere 
var myLine:Shape=gradientLine(sp,ep,0xFF0000,0x0000FF,0x00FF00,0xFFFF00); // put in as many colours as you want, the function will evenly space them out 
addChild(myLine); 

function gradientLine(startPoint:Point,endPoint:Point,...colours):Shape 
/*GRADIENT LINE - returns a line from startPoint to endPoint with   even gradient of colours*/ 
{ 
/*Create matrix - gradient box*/ 
    var d:Point=startPoint.subtract(endPoint); 
    d.x=Math.abs(d.x); 
    d.y=Math.abs(d.y); 
    if(d.x==0)d.x=1; /*corrects for lines going straight down*/ 

    var matrix:Matrix=new Matrix; 
    matrix.createGradientBox(d.x,d.y,Math.atan2(d.y,d.x),startPoint.x,startPoint.y);  

/*Create/populate array of ratios and alphas*/ 
    var l:int=colours.length; 
    var alphas:Array=new Array(); 
    var ratios:Array=new Array(); 
    for(var i:int=0;i<l;i++) 
    { 
     alphas.push(1); 
     ratios.push((0xFF/l)*i+1); /*evenly spreads ratios of chosen colours*/ 
    } 

/*Create shape*/ 
    var s:Shape=new Shape; 
    s.graphics.lineStyle(2); 
    s.graphics.lineGradientStyle(GradientType.LINEAR,colours,alphas,ratios,matrix); 
    s.graphics.moveTo(startPoint.x,startPoint.y); 
    s.graphics.lineTo(endPoint.x,endPoint.y); 

    return(s); 
}