Javascript 圆中的弧区
我想在SVG中得到类似的东西。 到目前为止,我已经做了圆圈,但我想正确定位周围的黑色区域 API返回四个值:Javascript 圆中的弧区,javascript,svg,automatic-ref-counting,round-rect,Javascript,Svg,Automatic Ref Counting,Round Rect,我想在SVG中得到类似的东西。 到目前为止,我已经做了圆圈,但我想正确定位周围的黑色区域 API返回四个值: 起始角度:第一个角度(看起来是弧度) end_角度:最终角度(看起来是弧度) 内半径:较小的半径 外半径:较大的半径 以下是我想要的方案: 我正在使用Javascript制作SVG,因此我的代码如下: var myArc = document.createElementNS('http://www.w3.org/2000/svg', 'path'); myArc.s
- 起始角度:第一个角度(看起来是弧度)
- end_角度:最终角度(看起来是弧度)
- 内半径:较小的半径
- 外半径:较大的半径
var myArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
myArc.setAttribute('fill', 'black');
myArc.setAttribute('d', 'M-'+outer_radius+',32A'+outer_radius+','+outer_radius+' 0 0,1 -'+outer_radius+',-32L-'+inner_radius+',-30A'+inner_radius+','+inner_radius+' 0 0,0 -'+inner_radius+',30Z');// TODO
arcs.appendChild(myArc);
这可以画出一个区域,但我不知道要输入什么值。
我已尝试确定要使用的点,但不起作用:
var pointA = [outer_radius * Math.cos(start_angle * 180 / Math.PI), outer_radius * Math.sin(start_angle * 180 / Math.PI)];
var pointB = [outer_radius * Math.cos(end_angle * 180 / Math.PI), outer_radius * Math.sin(end_angle * 180 / Math.PI)];
var pointC = [inner_radius * Math.cos(end_angle * 180 / Math.PI), inner_radius * Math.sin(end_angle * 180 / Math.PI)];
var pointD = [inner_radius * Math.cos(start_angle * 180 / Math.PI), inner_radius * Math.sin(start_angle * 180 / Math.PI)];
你能帮我解决这个问题吗
谢谢您的帮助。我想您可以定义中心点。如果是这样,请尝试以下操作(它使用度)并绘制两个独立的圆弧,即内弧和外弧。但是你可以得到每一个的起点和终点。路径由4部分组成: 1) 外弧 2) 开始外弧和开始内弧之间的桥接 3) 内弧 4) 从内弧端到外弧端 注意:路径的填充规则=偶数奇数 编辑:添加了弧
function drawInnerOuterArcs()
{
var centerX=200
var centerY=200
var innerRadius=120
var outerRadius=160
var startAngle=310 //--degrees
var endAngle=30 //--degrees
var ArcSweep = endAngle - startAngle <= 180 ? "0" : "1";
function polarToCartesian(centerX, centerY,radiusX, radiusY, angleInDegrees)
{
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radiusX * Math.cos(angleInRadians)),
y: centerY + (radiusY * Math.sin(angleInRadians))
};
}
//---outer points---
var StartPnt1 = polarToCartesian(centerX, centerY, outerRadius, outerRadius, startAngle);
var EndPnt1 = polarToCartesian(centerX, centerY, outerRadius, outerRadius, endAngle);
//---outer arc: begin path---
var d1 = [
"M", StartPnt1.x, StartPnt1.y,
"A", outerRadius, outerRadius, 0,ArcSweep, 1, EndPnt1.x, EndPnt1.y
].join(" ");
//---inner points---
var StartPnt2 = polarToCartesian(centerX, centerY, innerRadius, innerRadius, startAngle);
var EndPnt2 = polarToCartesian(centerX, centerY, innerRadius, innerRadius, endAngle);
//---start bridge--
d1+="M"+ StartPnt1.x+" "+StartPnt1.y+"L"+StartPnt2.x+" "+StartPnt2.y
//---inner arc---
var d2 = [
"A", innerRadius, innerRadius, 0,ArcSweep,1, EndPnt2.x, EndPnt2.y
].join(" ");
//--end bridge--
d2 +="L"+EndPnt1.x+" "+EndPnt1.y
//---arc fill-rule="evenodd"
myArc.setAttribute("d",d1+d2)
}
函数drawInnerOuterArcs()
{
var centerX=200
var centerY=200
var innerRadius=120
外部变量=160
var startAngle=310/--度
var端角=30/--度
var ArcSweep=endAngle-startAngle非常感谢。它完成了任务;)