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

理查德的答案看起来非常合理，不幸的是它对我不起作用（渐变不随线旋转）。

所以我搜索了土地的长度和宽度，寻找从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不会死。

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

使用ActionScript 3 / Flash在线上应用颜色渐变

3 个答案: