Применение цветового градиента к линии с помощью 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);

Спасибо! * * 1004

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

В основном ответвление от ответа Ричардолссона, но это более общая форма для людей, которые хотят достичь этого в целом и исправляют ошибку, если ваша линия идет прямо вниз (т. Е. Начальная и конечная точки имеют одинаковые 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);
}

Answer 3

Ответ Ричарда выглядит очень правдоподобно, к сожалению, он не сработал для меня (градиент не вращался вместе с линией).

Итак, я искал длину и ширину земли в поисках функции, рисующей линию от точки 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 );
}

Теперь вспышка не умрет.