4

SVG でわかっているように、角度のある線形グラデーションは、属性 x1、x2、y1、y2 を設定することによって行われます。ただし、角度だけを取得すると、

1.x1、y1、x2、y2の結果を計算する方法は?

2.この数式 tan (角度) = (y2-y1)/(x2-x1) は正しいですか? すべてのパラメータを計算するにはどうすればよいですか。

4

3 に答える 3

7

JT-の回答から構築されたもので、Javascriptで必要なことを正確に実行する関数を次に示します。要素と角度を整数として渡してこの関数を呼び出すだけです。オプションの引数として「左」、「右」、「上」、「下」も追加しました。

function svg_linear_gradient_direction(element, direction){

    if(direction === "left"){

        element.setAttributeNS(null, "x1", "100%");
        element.setAttributeNS(null, "y1", "0%");
        element.setAttributeNS(null, "x2", "0%");
        element.setAttributeNS(null, "y2", "0%");

    } else if(direction === "right"){

        element.setAttributeNS(null, "x1", "0%");
        element.setAttributeNS(null, "y1", "0%");
        element.setAttributeNS(null, "x2", "100%");
        element.setAttributeNS(null, "y2", "0%");

    } else if(direction === "down"){

        element.setAttributeNS(null, "x1", "0%");
        element.setAttributeNS(null, "y1", "0%");
        element.setAttributeNS(null, "x2", "0%");
        element.setAttributeNS(null, "y2", "100%");

    } else if(direction === "up"){

        element.setAttributeNS(null, "x1", "0%");
        element.setAttributeNS(null, "y1", "100%");
        element.setAttributeNS(null, "x2", "0%");
        element.setAttributeNS(null, "y2", "0%");

    } else if(typeof direction === "number"){

        var pointOfAngle = function(a) {
            return {
                x:Math.cos(a),
                y:Math.sin(a)
            };
        }

        var degreesToRadians = function(d) {
            return ((d * Math.PI) / 180);
        }

        var eps = Math.pow(2, -52);
        var angle = (direction % 360);
        var startPoint = pointOfAngle(degreesToRadians(180 - angle));
        var endPoint = pointOfAngle(degreesToRadians(360 - angle));

        if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps)
            startPoint.x = 0;

        if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps)
            startPoint.y = 0;

        if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps)
            endPoint.x = 0;

        if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps)
            endPoint.y = 0;

        element.setAttributeNS(null, "x1", startPoint.x);
        element.setAttributeNS(null, "y1", startPoint.y);
        element.setAttributeNS(null, "x2", endPoint.x);
        element.setAttributeNS(null, "y2", endPoint.y);
    }
}
于 2012-10-26T00:25:31.733 に答える
6

以下は、必要なもの、またはそれに近いものを取得する必要があります。要点は、回転領域内に開始点と終了点を作成することです。結果は、使用できる単位ベクトルのセットになります (つまり、0.0 と 1.0 の間)。inputAngle は、グラデーションにしたい角度です。

function pointOfAngle(a) {
    return {x:Math.cos(a),
            y:Math.sin(a)};
}

function degreesToRadians(d) {
    return ((d * Math.PI) / 180);
}

var eps = Math.pow(2, -52);
var inputAngle = 45;
var angle = (inputAngle % 360);
var startPoint = pointOfAngle(degreesToRadians(180 - angle));
var endPoint = pointOfAngle(degreesToRadians(360 - angle));

// if you want negative values you can remove the following checks
// but most likely it will produce undesired results
if(startPoint.x <= 0 || Math.abs(startPoint.x) <= eps)
    startPoint.x = 0;

if(startPoint.y <= 0 || Math.abs(startPoint.y) <= eps)
    startPoint.y = 0;

if(endPoint.x <= 0 || Math.abs(endPoint.x) <= eps)
    endPoint.x = 0;

if(endPoint.y <= 0 || Math.abs(endPoint.y) <= eps)
    endPoint.y = 0;

線形グラデーション値が SVG にどのように使用されているかはわかりませんが、要素のサイズを掛ける必要があるかもしれません...

x1 = startPoint.x * width
y1 = startPoint.y * height
x2 = endPoint.x * width
y2 = endPoint.y * height
于 2011-05-27T11:10:03.523 に答える
1

角度が 0 度であるかのように を設定しx_i、y_igradientTransform 属性を使用して回転を適用します ( gradientTransform="rotate(angle)")。

于 2011-04-02T00:42:29.053 に答える