2009-12-20 27 views
4

我正在尝试使用开始和结束渐变动态构建线条。我想避免使用GradientBox,因为这些行是动态的。我想要做的就是让线条开始红色,结束蓝色。虽然:(使用ActionScript 3在线上应用颜色渐变/ Flash

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); 

谢谢!

回答

6

你需要使用一个矩阵来决定梯度的面积有多大,在哪个方向,应该涂上此代码不能正常工作。沿着试一下这些行:。

// 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); 

基本上,这会产生梯度框是相同的宽度和高度,你将创建的线的边界矩形还应根据你的两点之间的角度旋转渐变,以确保渐变运行从一点到另一点。

2

理查德的回答看起来很合理,不幸的是它并没有为我工作(梯度没有随着线条旋转)。

所以我搜索了从A点到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); 
} 

现在的Flash不会死。

1

大部分是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); 
}