SVG：为给定的每个角度制作一个渐变以填充整个形状

给定一个介于0°和90°之间的角度,生成一个SVG渐变,该渐变会填充整个矩形.

SVG渐变接受两个控制点而不是角度.这是上图中第一个方框的代码：

< linearGradient x1 =“ 0” y1 =“ 0” x2 =“ 1” y2 =“ 0.5”>

问题在于渐变不能覆盖整个正方形.我想将渐变扩展到足以完全填充形状的位置,这样红色三角形将不可见.这是一个interactive demo(已在Chrome,Firefox和Safari中测试),可以为您提供一个更好的主意.

Solution in JavaScript：

function angleToVector(angle) {
    var od = Math.sqrt(2);
    var op = Math.cos(Math.abs(Math.PI/4 - angle)) * od;
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);
    return {x: x, y: y};
}

对于angle between -180° and 180°：

function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal = (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
        x1: x < 0 ? 1 : 0,
        y1: y < 0 ? 1 : 0,
        x2: x >= 0 ? x : x + 1,
        y2: y >= 0 ? y : y + 1
    };
}

可能有一个更简单的解决方案.

解决方法:

因此,据我所知,您的问题是：给定一个矩形(其左上角为原点O =(0,0)且其右下角为D =(w,h)),并在点O处经过l角度a(0°< = a< = 90°),找到l上的点P =(x2,y2),使得线DP与l成直角. 如果您绘制矩形的对角线OD,则它将以P的直角完成一个直角三角形.该对角线的角为atan(h / w),并且如果您将其与a取绝对差(即| atan(h / w)-a |),您将在点O处获得该直角三角形的角度.然后,您可以获取该角度的余弦值,以得到长度为L的O和P沿l的距离OD(斜边).您可以将斜边相乘,然后分别乘以cos(a)和sin(a)分别得到x2和y2. 总结一下：

|OD| = sqrt(w*w + h*h)
|OP| = cos(|atan(h/w) - a|) * |OD|
x2 = |OP| * cos(a)
y2 = |OP| * sin(a)

标签：linear-gradients,vector,svg,trigonometry,javascript
来源： https://codeday.me/bug/20191030/1966020.html