4

正如我们在 SVG 中所知道的，角度线性渐变是通过设置属性 x1,x2,y1,y2 来实现的。但是，如果我们只得到角度，

1.x1,y1,x2,y2的结果如何计算？

2.这个公式tan（角度）=（y2-y1）/（x2-x1）是否正确？如何计算所有参数。

4

3 回答 3

7

基于 JT- 的答案，这里有一个函数可以完全满足您在 Javascript 中所需要的功能。只需调用此函数，将元素和度数作为整数传递。我还添加了 "left","right","up","down" 作为可选参数。

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

设置x_i，y_i好像角度为 0 度，并通过 gradientTransform 属性 ( gradientTransform="rotate(angle)") 应用旋转，

于 2011-04-02T00:42:29.053 回答