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 画布中绘制坐标轴变得 ...
随机推荐
- 《前端运维》五、k8s--4机密信息存储与统一管理服务环境变量
一.储存机密信息 Secret 是 Kubernetes 内的一种资源类型,可以用它来存放一些机密信息(密码,token,密钥等).信息被存入后,我们可以使用挂载卷的方式挂载进我们的 Pod 内.当然 ...
- uniapp 坑 - sslVerify不支撑离线打包
uniapp 打包为Android的apk时,由于适用https和自签证书,离线打包不支撑sslVerify,导致出现Trust anchor for certification path not f ...
- vscode本地调试gitbook
1. windows下载安装git 2.安装nodejs 下载安装nvm https://github.com/coreybutler/nvm-windows/releases/download/1. ...
- 腾讯云对象存储联合DataBend云数仓打通数据湖和数据仓库
随着数字化进程不断深入,数据呈大规模.多样性的爆发式增长.为满足更多样.更复杂的业务数据处理分析的诉求,湖仓一体应运而生.在Gartner发布的<Hype Cycle for Data Mana ...
- 4.mysql中的存储过程
创建存储过程和函数 CREATE [DEFINER = {USER | CURRENT_USER}] # 定义者是谁 PROCEDURE sp_name ([proc_parameter[,...]] ...
- Qt编写地图综合应用55-海量点位标注
一.前言 海量点位标注的出现,是为了解决普通设备点超过几百个性能极速降低的问题,普通的marker标注由于采用的是对象的形式存在于地图中,数量越多,占用内存特别大,超过1000个点性能极其糟糕,哪怕是 ...
- v-for和v-if一起使用时的坑:The 'XXX' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'
目的:Vue - ElementUI中循环渲染表格,控制字段的显示与隐藏 v-if与v-for同时使用. 在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正 ...
- java EE进行Web开发时*.jsp页面的<%@显示“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”错误,webcontent文件夹总是出现红x或者java源码出现The import javax.servlet cannot be resolved 的解决方法
我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServlet was not found on t ...
- 阿里IM技术分享(五):闲鱼亿级IM消息系统的及时性优化实践
本文由阿里闲鱼技术团队有攸分享,原题"向消息延迟说bybye:闲鱼消息及时到达方案",有修订和改动,感谢作者的分享. 1.引言 IM消息作为闲鱼用户重要的交易咨询工具,核心目标有两 ...
- 基于sass tailwindcss的传统页面开发脚手架
这是一个基于sass和tailwindcss的快速开发传统多页面的npm脚手架. package.json { "name": "sass-tailwindcss-sta ...