- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在 SVG 中得到类似的东西。到目前为止,我已经制作了圆圈,但我想正确定位周围的黑色区域。
API 返回四个值:
这是我想要的方案:
我正在用 Javascript 制作 SVG,所以我的代码是这样的:
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)内弧端到外弧端
注意:路径的fill-rule=evenodd
编辑:添加 ArcSweep
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)
}
关于javascript - 圆圈中的 SVG 圆弧区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21940903/
我正在尝试让角色以弧形向目标扔东西。 我知道顶点(x,y)和目标(x,y),我想得到一条从原点(x,y)到目标的最大高度为 vertex.y 的弧 我所拥有的是基于 y = a(x-h)^2 + k
我正在使用 html5 canvas 创建财富之轮。它与填充样式颜色配合得很好。我想要随机切片填充样式图案中的两(2)个不同图像。我如何实现这一目标。 这是我的 JS function rand(mi
我不明白为什么我需要在某些 block 中有一个弱的 self ,而其他的似乎工作正常。 如果我在 Notification block 中没有对 self 的弱引用,dealloc 将不会被释放。不
我正在尝试弄清楚如何在极坐标图中的两点之间创建弧线,但我绘制的线是连接它们的直线,即使该图是极坐标。 我需要使用其他绘图函数来代替 ax.plot 吗? 我注意到 matplotlib 中有一些补丁,
我正在尝试在 d3 中创建一个半圆。使用 cardinal interpolation产生一条接近我想要的路径,但不够“圆形”。如何编写自己的插值器来更好地绕过这条路径,或者有更好的方法吗? 这是我目
我正在开发一个启用 ARC 的项目。我正在从 View Controller 中推送 MyClass, - (void)pushMyClass { MyClass *myClass = [[
我有四点。它是可拖动的。在任何时候我点击“绘制”按钮我想显示 Angular 。我尝试过,但它会在外面画出陡峭 Angular 弧线。但我想在形状内的任意点绘制圆弧。 $(document).read
我正在尝试为 Android 设备修改操纵杆组件。目前该组件能够跟踪您手指的 x 和 y 位置并在那里绘制一个小圆圈。现在我要做的是从中心到手指的 x 和 y 位置绘制一个矩形或圆弧。 据我所知,矩形
有没有人有在 svgwrite (python) 中完成的弧形切片(奶酪切片或吃 bean 人)的工作示例,我已经尝试过这个,试图获得一个从 (100,100) 开始的西北象限,但得到一个奇怪的形状:
我正在开发一个 iPad(仅限)应用程序,我偶然发现了一个奇怪的问题。该应用程序在 iPad 1 上出现内存警告后终止,但在 iPad 2 上运行正常。我正在使用 ARC 并以 iOS 5 为目标。我
dealloc(下)会释放静态变量exampleString指向的NSString吗? // ExampleClass.h @interface ExampleClass : NSObject @
我正在尝试使用 WPF 在 Canvas 上绘制导入的 DXF 文件。我一直在使用 DXFLib(可用 here)来读取和解析各种文件,它似乎工作得很好。 我现在正在绘制 DXF 中的所有实体,但我受
我正在使用 NSManagedObjects,我想返回任务的预算或任务类别的预算。 但是,该方法给出了错误: Implicit conversion of int to Budget * is dis
我正在使用 JQuery.path沿贝塞尔曲线移动对象。单击该项目时,我可以确定起点和终点。如何计算 Angular 和长度,使元素在与起点和终点相交的 1/4 圆弧上从 A 点移动到 B 点? 我基
当转换到 ARC 时,我收到以下编译器错误:“删除未使用的自动释放消息是不安全的”。 如果我简单地删除自动释放消息,obj 将在 getAutoreleasedObj 结束时立即被释放,这将导致 pr
我是 Instruments 的新手,但我之前已经成功地找到了漏洞。这一次,不是这样——每次我调用这段代码时都会有 34MB 的泄漏!我试图在下面发布所有相关代码,同时删除 DDLogging 等内容
我正在从手动内存管理过渡到 ARC,但遇到了问题。大多数时候,我通过在我的模型类中调用 performSelectorInBackground 来异步执行数据加载。问题是当模型收到 nil(发布)时,
我正在尝试将项目转换为使用 ARC。 我有一个这样的声明属性: @property (nonatomic, retain, setter=setSomeProperty:) SomeClass * s
在关于为特定类禁用 ARC 编译器机制的 stackoverflow 主题之后,我将 -fno-objc-arc 参数添加到 Compile Sources 部分(TARGETS 项目中的 Buil
考虑这个 ARC 代码: - (void)main { NSString *s = [[NSString alloc] initWithString:@"s"]; [NSApp beg
我是一名优秀的程序员,十分优秀!