Question

I am trying to construct a line dynamically, with a start and end gradient. I want to avoid using a GradientBox, as the lines are dynamic. All I want to do is have the line start red, end blue. This code does not work though 🙁

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

Thanks!

Answer 1

You need to use a matrix to dictate how big the area of the gradient is, and in which direction it should be painted. Try something along these lines:

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

Basically this will create a gradient box that is the same width and height as the bounding rectangle of the line you will be creating. It should also rotate the gradient according to the angle between your two points, to make sure that the gradient runs from one point to the other.