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

基本的に、これにより、作成する線の外接する長方形と同じ幅と高さのグラデーションボックスが作成されます。また、グラデーションが1つのポイントから別のポイントに移動することを確認するために、2つのポイント間の角度に従ってグラデーションを回転させる必要があります。

于 2009-12-20T22:02:20.313 に答える
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 に答える
2

ほとんどは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);
}
于 2015-02-23T06:06:27.920 に答える