SVG 甜甜圈切片作为路径元素(环形扇区) [英] SVG donut slice as path element (annular sector)

问题描述

好吧，这不是错误，但我对如何通过贝塞尔曲线在点之间获得完美的圆弧感到困惑.

Ok so granted, its not a bug, but I am confounded by how to get a perfect circle arc between points via Bézier curve.

我需要这样的形状:

所以我一直使用以下公式从中心点、半径和角度计算这样的四个角点:(x?,y?)=(x+d cos α,y+d sin α),在我的咖啡脚本中看起来像这样:

So I've been calculating the four corner points like this from the center point, radius and angle with the following formula: (x?,y?)=(x+d cos α,y+d sin α), which in my coffeescript looks something like this:

x1 = centerPointX+outerRadius*Math.cos(currentAngle)
y1 = centerPointY+outerRadius*Math.sin(currentAngle)
x2 = centerPointX+innerRadius*Math.cos(currentAngle)
y2 = centerPointY+innerRadius*Math.sin(currentAngle)
x3 = centerPointX+outerRadius*Math.cos(currentAngle2)
y3 = centerPointY+outerRadius*Math.sin(currentAngle2)
x4 = centerPointX+innerRadius*Math.cos(currentAngle2)
y4 = centerPointY+innerRadius*Math.sin(currentAngle2)

如何获取我拥有的信息并生成具有完美圆曲线的路径元素?

How can I take the information I have and result in a path element with perfect circular curves?

(PS 我是 SVG 的新手，如果你想帮助我使用 d= 的正确语法，那会很酷，但我总是可以自己编写它.我想要帮助的挑战实际上更多的是用贝塞尔做.

(PS I am newish to SVG and if you want to help me out with the proper syntax for d= that would be cool, but I can always just write it myself. The challenge I would like help with is really more to do with Bézier.

更新/解决方案

使用以下指南的答案是我实际使用的功能:

Using the answer below a guidance below is the function I actually used:

annularSector = (centerX,centerY,startAngle,endAngle,innerRadius,outerRadius) ->               
    startAngle  = degreesToRadians startAngle+180
    endAngle    = degreesToRadians endAngle+180
    p           = [ 
        [ centerX+innerRadius*Math.cos(startAngle),     centerY+innerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(startAngle),     centerY+outerRadius*Math.sin(startAngle) ]
        [ centerX+outerRadius*Math.cos(endAngle),       centerY+outerRadius*Math.sin(endAngle) ]
        [ centerX+innerRadius*Math.cos(endAngle),       centerY+innerRadius*Math.sin(endAngle) ] 
    ]
    angleDiff   = endAngle - startAngle
    largeArc    = (if (angleDiff % (Math.PI * 2)) > Math.PI then 1 else 0)
    commands    = []

    commands.push "M" + p[0].join()
    commands.push "L" + p[1].join()
    commands.push "A" + [ outerRadius, outerRadius ].join() + " 0 " + largeArc + " 1 " + p[2].join()
    commands.push "L" + p[3].join()
    commands.push "A" + [ innerRadius, innerRadius ].join() + " 0 " + largeArc + " 0 " + p[0].join()
    commands.push "z"

    return commands.join(" ")   

推荐答案

Demo: http://phrogz.net/svg/procedural_annular_sector.xhtml

用法:

Demo: http://phrogz.net/svg/procedural_annular_sector.xhtml

Usage:

annularSector( myPathElement, {
  centerX:100, centerY:150,
  startDegrees:190, endDegrees:230,
  innerRadius:75, outerRadius:100
});

核心功能:

// Options:
// - centerX, centerY: coordinates for the center of the circle    
// - startDegrees, endDegrees: fill between these angles, clockwise
// - innerRadius, outerRadius: distance from the center
// - thickness: distance between innerRadius and outerRadius
//   You should only specify two out of three of the radii and thickness
function annularSector(path,options){
  var opts = optionsWithDefaults(options);
  var p = [ // points
    [opts.cx + opts.r2*Math.cos(opts.startRadians),
     opts.cy + opts.r2*Math.sin(opts.startRadians)],
    [opts.cx + opts.r2*Math.cos(opts.closeRadians),
     opts.cy + opts.r2*Math.sin(opts.closeRadians)],
    [opts.cx + opts.r1*Math.cos(opts.closeRadians),
     opts.cy + opts.r1*Math.sin(opts.closeRadians)],
    [opts.cx + opts.r1*Math.cos(opts.startRadians),
     opts.cy + opts.r1*Math.sin(opts.startRadians)],
  ];

  var angleDiff = opts.closeRadians - opts.startRadians;
  var largeArc = (angleDiff % (Math.PI*2)) > Math.PI ? 1 : 0;
  var cmds = [];
  cmds.push("M"+p[0].join());                                // Move to P0
  cmds.push("A"+[opts.r2,opts.r2,0,largeArc,1,p[1]].join()); // Arc to  P1
  cmds.push("L"+p[2].join());                                // Line to P2
  cmds.push("A"+[opts.r1,opts.r1,0,largeArc,0,p[3]].join()); // Arc to  P3
  cmds.push("z");                                // Close path (Line to P0)
  path.setAttribute('d',cmds.join(' '));

  function optionsWithDefaults(o){
    // Create a new object so that we don't mutate the original
    var o2 = {
      cx           : o.centerX || 0,
      cy           : o.centerY || 0,
      startRadians : (o.startDegrees || 0) * Math.PI/180,
      closeRadians : (o.endDegrees   || 0) * Math.PI/180,
    };

    var t = o.thickness!==undefined ? o.thickness : 100;
    if (o.innerRadius!==undefined)      o2.r1 = o.innerRadius;
    else if (o.outerRadius!==undefined) o2.r1 = o.outerRadius - t;
    else                                o2.r1 = 200           - t;
    if (o.outerRadius!==undefined)      o2.r2 = o.outerRadius;
    else                                o2.r2 = o2.r1         + t;

    if (o2.r1<0) o2.r1 = 0;
    if (o2.r2<0) o2.r2 = 0;

    return o2;
  }
}

这篇关于SVG 甜甜圈切片作为路径元素(环形扇区)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！