path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径

您想使用椭圆Arc命令。不幸的是，这需要你指定起点和终点的笛卡尔坐标(x，y)而不是你拥有的极坐标(半径，角度)，所以你必须做一些数学运算。这是一个应该工作的JavaScript函数(虽然我还没有测试过)，我希望它是相当不言自明的：function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

var angleInRadians = angleInDegrees * Math.PI / 180.0;

var x = centerX + radius * Math.cos(angleInRadians);

var y = centerY + radius * Math.sin(angleInRadians);

return [x,y];}

哪个角度对应于哪个时钟位置将取决于坐标系; 只需交换和/或否定sin / cos术语。

arc命令具有以下参数：rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

第一个例子：

rx= ry= 25且x-axis-rotation= 0，因为你想要一个圆而不是一个椭圆。您可以使用上面的函数分别计算起始坐标(您应该过去M)和结束坐标(x，y)，分别得出(200,175)和约(182.322,217.678)。到目前为止，鉴于这些限制，实际上可以绘制四个弧，因此两个标志选择其中一个。我猜你可能想要large-arc-flag在减小角度的方向上绘制一个小弧(意思是= 0)(意思是sweep-flag= 0)。总之，SVG路径是：M 200 175 A 25 25 0 0 0 182.322 217.678

对于第二个示例(假设您指的是相同的方向，因此是一个大弧)，SVG路径是：M 200 175 A 25 25 0 1 0 217.678 217.678

我再次测试过这些。

(编辑2016-06-01)如果像@clocksmith一样，您想知道他们为什么选择这个API，请查看实施说明。他们描述了两种可能的弧参数化，“端点参数化”(他们选择的那个)和“中心参数化”(这就像问题所用的那样)。在“端点参数化”的描述中，他们说：端点参数化的一个优点是它允许一致的路径语法，其中所有路径命令都以新的“当前点”的坐标结束。

所以基本上它是弧的副作用被视为更大路径的一部分而不是它们自己的独立对象。我想如果你的SVG渲染器不完整，它可以跳过它不知道如何渲染的任何路径组件，只要它知道它们采用了多少个参数。或者它可以实现具有许多组件的路径的不同块的并行渲染。或许他们这样做是为了确保舍入错误不会沿着复杂路径的长度积累。

实现说明对于原始问题也很有用，因为它们有更多的数学伪代码用于在两个参数化之间进行转换(我在第一次写这个答案时没有意识到)。

path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径相关推荐

path弧形参数 svg_SVG路径中的A指令（画弧线）
绘制圆弧指令: A rx ry x-axis-rotation large-arc-flag sweep-flag x y 画笔从当前的点绘制一段圆弧到点(x,y) SVG路径中的A指令有7个参数,分 ...
SVG路径（path）中的圆弧(A)指令的语法说明及计算逻辑
SVG中的路径数据,即path元素的 d 属性,有一系列的路径绘制指令,其中椭圆弧指令(A)最复杂,不算椭圆弧起始点的x,y坐标的话,依然有 7 个参数. SVG椭圆弧指令的参数,与Canvas等圆弧 ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
python animation path_帅气的SVG路径描边动画 (path animation) 实战应用
这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看. 要是觉得文章还不错的话,可以多多推荐哦. 今天这篇文章来聊聊SVG路 ...
android画布画弧形,在Android中绘制圆弧边缘圆弧,具有浮雕效果
我正在尝试开发一个自定义组件,即圆弧滑块,我完成了弧和拇指,但不能弄清楚如何绘制圆弧边缘弧和其中的浮雕效果.在这一刻,滑块看起来像这样绘制弧的代码是 private void drawSlider( ...
SVG PATH d参数的 ace
SVG PATH 的d参数较多,也比较复杂. Moveto Lineto Curveto Arcto ClosePath 这里只打算记录下 Arcto 参数.(https://developer.mo ...
path png转svg_如何将jpg或png图像转换成svg并保存？
我在Python方面没有太多经验,但我有一个解决方案:import os startSvgTag = """<?xml version="1.0" ...
相机参数估计值如何计算？
在三维重建中,标定是很重要的一环,而在所有标定中,单目相机标定是最基础的,对于新手而言,跑通了一个相机标定代码,得到了一堆参数结果,如何判断自己的标定的是对的呢?RMS(重投影误差)小标定就一定准确吗 ...
最短路径：地图软件是如何计算出最优出行路径的？
------ 本文是学习算法的笔记,<数据结构与算法之美>,极客时间的课程 ------ 今天,从地图软件的路径规划问题讲起,带你看看常用的最短路径算法(Shortest Path Alg ...

path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径

path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径相关推荐

最新文章

热门文章