JS ellipse 转 PathData
绘制Path
function ellipse2path(cx, cy, rx, ry, degree) {
//cx cy:圆心
//rx ry:x y 轴长
//degree:度数,顺时针方向为正
//思路:求出直线与椭圆的交点,然后从一端绘制到另一端
//非数值单位计算,如当宽度像100%则移除
if (isNaN(cx - cy + rx - ry))
return;
//逆时针绘制
var radian = (Math.PI * 2 / 360) * degree
var x1 = cx + rx * Math.cos(radian)
var y1 = cx + rx * Math.sin(radian) //计算机Y轴正向向下
var x2_relative = 2 * rx * Math.cos(radian)
var y2_relative = -2 * rx * Math.sin(radian) var path = 'M' + x1 + ' ' + y1 +
'a' + rx + ' ' + ry + ' ' + degree + ' 1 1 ' + x2_relative + ' ' + y2_relative + ' ' +
'a' + rx + ' ' + ry + ' ' + degree + ' 1 1 ' + -1 * x2_relative + ' ' + -1 * y2_relative + ' ' + 'z';
return path;
}
JS ellipse 转 PathData的更多相关文章
- arcgis api for js入门开发系列五地图态势标绘(含源代码)
上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- svg.js教程及使用手册详解(二)
上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...
- d3.js读书笔记-1
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...
- Three.js typescript definitely typed 文件
最近学习three.js,想用typescript编写代码,去http://definitelytyped.org/找了一圈没有发现three.js的definitely typed文件. 好吧,花了 ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- [javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- svg DOM的一些js操作
这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Cir ...
- [JS] JavaScript框架(2) D3
D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...
- D3.js 坐标轴
坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成. D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...
随机推荐
- COSBrowser文件链接导出——爆赞的本地化管理功能
前言 用过COSBrowser的小伙伴们应该都知道,COSBrowser的文件分享功能非常好用.但是,文件分享功能又有所局限,就是它只能分享单个文件,而文件夹分享,更有其因为部分必要因素,如安全性 ...
- 2024年1月Java项目开发指南5:controller、service、mapper
准备工作 你知道什么是JSON吗? JSON是什么? 格式是什么? 有什么用? 有什么优点? 有什么缺点? 请自己百度探索一下,对JSON做了个了解,如果你不知道什么是JSON的话,知道就免了,直接下 ...
- Springboot 指定外部配置文件启动
<resources> <resource> <directory>src/main/resources</directory> <filteri ...
- 『玩转Streamlit』--上传下载文件
在Web应用中,文件的上传下载是交互中不可缺少的功能. 因为在业务功能中,一般不会只有文字的交互,资料或图片的获取和分发是很常见的需求. 比如,文件上传可让用户向服务器提交数据,如上传图片分享生活.提 ...
- 国产系统中标麒麟neokylin上的可视化大屏电子看板系统
一.功能特点 采用分层设计,整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件. 子控件包括饼图.圆环图.曲线图.柱状图.柱状分组图.横向柱状图.横向柱状分组图.合格率 ...
- Qt编写安防视频监控系统28-摄像机点位
一.前言 摄像机点位的功能主要是在图片地图和在线离线地图上设置对应摄像机的位置,然后双击可以实时预览对应摄像机的视频,在图片地图上拖动摄像机图标到对应位置,系统会自动保存位置信息,在网页地图上的摄像机 ...
- 如何使用图片的exif信息计算相机焦距
135胶卷源于35mm高度的打孔电影胶片,1913年,德国人奥斯卡·巴纳克将其用于他发明的徕卡(Leica)牌小型照相机上,由此形成标准.35mm电影胶卷,35mm指的是胶卷的高度为35mm,由于上下 ...
- Python 项目组织最佳实践:从脚本到大型项目的进化之路
在 Python 开发生涯中,相信很多人都是从写简单脚本开始的.随着项目规模扩大,我们会遇到各种项目组织的问题.今天,让我们从一个实际场景出发,看看如何一步步优化 Python 项目结构,实现从简单脚 ...
- Wgpu图文详解(05)纹理与绑定组
前言 什么是纹理? 纹理是图形渲染中用于增强几何图形视觉效果的一种资源.它是一个二维或三维的数据数组,通常包含颜色信息,但也可以包含其他类型的数据,如法线.高度.环境光遮蔽等.纹理的主要目的是为几何图 ...
- docker没有vi不能执行yum报Device or resource busy
最近在使用docker的过程中发现一个问题,就是想用vim编辑器编辑一个文件,发现连vi都没有. 于是想到一个办法用docker cp来解决问题: 首先执行docker ps -a查看容器的id 然后 ...