在SVG上绘制圆弧段

Question

鉴于下一个信息：

• 白点是圆圈的中心。
• 蓝色，绿色点是圆圈边缘的点。
• 方向：顺时针，逆时针方向

使用任意点（蓝色，绿色）和白点，然后我可以得到半径，我可以绘制一个圆。但是我不想画一个圆圈而只是蓝点和绿点之间的圆弧

使用带有SVG的弧（省略号），我得到了2个带有large_arc_flag的选项

在这个例子中：第二个选项是我想要的选项：large_arc_flag = 1，但有时我想要large_arc_flag = 0。事实上，我只想要属于那个圆圈的弧线。使用带有“A”的路径，由于椭圆的交叉，我得到2个弧。

我该如何解决？

谢谢！

Answer 1

给定一个随机圆心（白点），一个随机边缘点（绿色）和第二个镜像边缘点（蓝色），您可以按如下方式计算svg弧。

• 将水平和垂直椭圆半径设置为绿点和白点之间的距离
• 将x轴旋转设置为零（因为旋转圆圈没有视觉差异）
• 如果绿点高于白点，则将大弧标志设置为1，否则为零（我认为这是您要问的关键事项）
• 将扫描标志设置为零，因为黄色路径是从左图像边框到右图像边界任意绘制的，需要逆时针旋转弧形轨迹轨迹
• 将最终点设置为蓝点坐标

根据随机中心和边缘点，针对不同的弧配置重复运行下面的代码片段。

＆＃13;

＆＃13;

var xmlns = "http://www.w3.org/2000/svg"; // svg namespace
var doc = document; // common abbreviation
var spc = " "; // space
var com = ","; // comma

var wd = 200; // svg width
var ht = 200; // svg height
var svg = doc.querySelector("svg"); // retrieve svg root element
setAttributes(svg, {width: wd, height: ht}); // set the svg dimensions
var cenX = wd / 2; // centre the circle horizontally
var cenY = Math.random() * (ht / 2) + (ht / 4); // pick a random circle centre height

var x1 = Math.random() * (wd / 3) + (wd / 7); // pick a random green point position
var y1 = Math.random() * (ht / 2) + (ht / 4);

var x2 = wd - x1; // mirror the blue point on the green point
var y2 = y1;

showPt(cenX, cenY, "white"); // show the white circle centre
showPt(x1, y1, "green"); // show the coloured edge points
showPt(x2, y2, "blue");

var path = doc.createElementNS(xmlns, "path"); // create the yellow path element
setAttributes(path, { // give it colour and width but no fill
  stroke: "yellow",
  "stroke-width": 3,
  fill: "none"
});
svg.appendChild(path); // add it to the picture

var rad = Math.sqrt((x1-cenX)*(x1-cenX) + (y1-cenY)*(y1-cenY)); // calculate the circle radius
var lgArcFlag = (y1 < cenY ? 1 : 0); // the arc will be large if the edge points are above the circle centre
setAttributes(path, { // create the trajectory of the yellow path
  d:
    "M" +
    "0," + y1 + // start it at the left border at the height of the green edge point
    "L" +
    x1 + com + y1 + spc + // draw it to the green edge point
    "A" + // make an arc
    rad + spc + rad + spc + // using the circle radius
    0 + spc + // with no rotation of the ellipse/circle
    lgArcFlag + spc + 0 + spc +  // using the large-arc-flag
    x2 + com + y2 + spc + // drawn to the blue edge point
    "L" +
    wd + com + y1 // and drawn straight out to the right border
});

function showPt(x, y, fill) {
  var pt = doc.createElementNS(xmlns, "circle");
  setAttributes(pt, {
    cx: x,
    cy: y,
    r: 8,
    fill: fill
  });
  svg.appendChild(pt);
  return pt;
}

function setAttributes(el, attrs) {
  var recursiveSet = function(at, set) {
    for (var prop in at) {
      var a = at[prop];
      if (typeof a === 'object' && a.dataset === undefined && a[0] === undefined) {
        recursiveSet(a, set [prop]);
      } else {
        set.setAttribute(prop, a);
      }
    }
  }
  recursiveSet(attrs, el);
}

＆＃13;

<svg>
  <rect id="bkgd" fill="black" x="0" y="0" width="300" height="300" />
</svg>

＆＃13;

＆＃13;

＆＃13;