在 raphael js 中绘制中心弧
我需要使用 raphael.js 绘制各种尺寸的同心弧。我试图理解 http://raphaeljs.com/polar-clock.html 背后的代码,这与我想要的非常相似,但是,如果没有注释,它很难理解。
理想情况下,我需要一个函数来创建一条距离某个中心点给定距离、以某个角度开始并以其他角度结束的路径。
I need to draw concentric arcs of various sizes using raphael.js. I tried to understand the code behind http://raphaeljs.com/polar-clock.html, which is very similar to what I want, but, whithout comments, it is quite difficult to fathom.
Ideally, I would need a function that creates a path that is at a given distance from some center point, starts at some angle and ends at some other angle.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
只是为了消除 user592699 的答案中的一些猜测,这是完整的代码:
Just to remove some guesswork from user592699's answer, this is the complete code that works:
对于那些希望用闭合路径而不是行程来制作圆弧的人,我扩展了 genkilabs 答案来制定解决方案。如果您需要为弧线提供外行程,这可能会有所帮助。
JSFiddle
For those who want the arc to be made with closed path and not stroke, I have extended genkilabs answer to make a solution. In cases when you need to give outer stroke to your arc, this might help.
JSFiddle
您也可以在不使用循环的情况下执行此操作。下面的方法实现了这一点,并且也适用于负角度。
将 Raphael 对象作为 r 传入。角度从 0 度开始,这是圆的顶部,而不是其他几个解决方案中列出的右侧。
You can also do this without having to use loops. The following achieves this and works with negative angles as well.
Pass in a Raphael object as r. The angles start with 0 degrees, which is the top of the circle rather than the right as was listed in a couple of other solutions.
我已经调整了 genkilabs 答案以包括旋转和反转能力。此外,环的填充量也更改为单个百分比。 (反演改编自这篇文章)。希望它有帮助!
I have adapted genkilabs answer to include rotation and inversion abilities. Also, how much of the ring is filled was changed to a single-number percent. (The inversion was adapted from this post). Hope it's helpful!
这个答案可以,但不能动画。我为你从极地时钟中撕下了重要的东西。这是一条动画生长的红色弧线。享受。
That answer is ok, but cant be animated. I ripped the important stuff out of polar-clock for you. Here is a red arc that animates growing. enjoy.
我是这样做的。以下代码允许您指定起始角度和结束角度以及内半径和外半径(对于制作那些流行的甜甜圈样式饼图很有用)。该解决方案不依赖于用线段近似曲线,并且可以按照原始问题中提到的时钟示例进行动画处理。
首先创建你的Raphael绘图区域;下面假设 HTML 文件中有一个 id 为“raphael_paper”的 div:
对于这个 Raphael 对象,我们添加一个自定义
arc
属性,一个采用圆心(x 和 y 坐标)的函数,起始角度、结束角度、内半径和外半径:现在我们可以使用它来绘制指定厚度的圆弧,在我们想要的任何地方开始和结束,例如。
这应该会产生三个带有红色、蓝色和绿色 1px 边框的灰色弧段。
Here's how I have done it. The following code allows you to specify a start and end angle as well as an inner and outer radius (useful for doing those trendy donut style pie charts). The solution doesn't rely on approximating a curve with line segments and can be animated as per the clock example mentioned in the original question.
First create your Raphael drawing area; the following assumes a div with id "raphael_paper" in your HTML file:
to this Raphael object we add a custom
arc
attribute, a function which takes the center of a circle (x and y coords), a start angle, an end angle, an inner radius and an outer radius:now we can use this to draw arcs of a specified thickness, starting and ending wherever we want them to eg.
This should result in three grey arc segments with red, blue and green 1px borders.
其实我自己也找到了答案。我首先想到了一些涉及贝塞尔曲线的奇特的东西,但这确实有效。
->使用 SVG 路径语法创建路径,与 raphael 一样工作
Actually found the answer myself. I first thought of something fancy involving bezier curves, but this just works.
-> creates a path using SVG path syntax, which works as is with raphael