4

我正在尝试动态构造一条线，具有开始和结束渐变。我想避免使用 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);

谢谢！

4

3 回答 3

7

您需要使用矩阵来指示渐变的面积有多大，以及应该在哪个方向上绘制。尝试以下方式：

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

基本上，这将创建一个渐变框，其宽度和高度与您将创建的线条的边界矩形相同。它还应该根据两点之间的角度旋转渐变，以确保渐变从一个点运行到另一点。

于 2009-12-20T22:02:20.313 回答
2

Mostly a fork from richardolsson's answer but this is a more generic form for people who want to achieve this in general and fixes the bug if your line goes straight down (ie start and end point have the same x). The function will stand-alone.

//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);
}
于 2015-02-23T06:06:27.920 回答
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 );
}

现在闪电侠不会死。

于 2014-01-18T21:41:16.407 回答