绘制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的更多相关文章

  1. arcgis api for js入门开发系列五地图态势标绘(含源代码)

    上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...

  2. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

  3. svg.js教程及使用手册详解(二)

    上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...

  4. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  5. Three.js typescript definitely typed 文件

    最近学习three.js,想用typescript编写代码,去http://definitelytyped.org/找了一圈没有发现three.js的definitely typed文件. 好吧,花了 ...

  6. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  7. [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 ...

  8. svg DOM的一些js操作

    这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Cir ...

  9. [JS] JavaScript框架(2) D3

    D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...

  10. D3.js 坐标轴

    坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成.坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成. D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得 ...

随机推荐

  1. 《前端运维》五、k8s--4机密信息存储与统一管理服务环境变量

    一.储存机密信息 Secret 是 Kubernetes 内的一种资源类型,可以用它来存放一些机密信息(密码,token,密钥等).信息被存入后,我们可以使用挂载卷的方式挂载进我们的 Pod 内.当然 ...

  2. uniapp 坑 - sslVerify不支撑离线打包

    uniapp 打包为Android的apk时,由于适用https和自签证书,离线打包不支撑sslVerify,导致出现Trust anchor for certification path not f ...

  3. vscode本地调试gitbook

    1. windows下载安装git 2.安装nodejs 下载安装nvm https://github.com/coreybutler/nvm-windows/releases/download/1. ...

  4. 腾讯云对象存储联合DataBend云数仓打通数据湖和数据仓库

    随着数字化进程不断深入,数据呈大规模.多样性的爆发式增长.为满足更多样.更复杂的业务数据处理分析的诉求,湖仓一体应运而生.在Gartner发布的<Hype Cycle for Data Mana ...

  5. 4.mysql中的存储过程

    创建存储过程和函数 CREATE [DEFINER = {USER | CURRENT_USER}] # 定义者是谁 PROCEDURE sp_name ([proc_parameter[,...]] ...

  6. Qt编写地图综合应用55-海量点位标注

    一.前言 海量点位标注的出现,是为了解决普通设备点超过几百个性能极速降低的问题,普通的marker标注由于采用的是对象的形式存在于地图中,数量越多,占用内存特别大,超过1000个点性能极其糟糕,哪怕是 ...

  7. 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,那么会提示使用计算属性(能正 ...

  8. 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 ...

  9. 阿里IM技术分享(五):闲鱼亿级IM消息系统的及时性优化实践

    本文由阿里闲鱼技术团队有攸分享,原题"向消息延迟说bybye:闲鱼消息及时到达方案",有修订和改动,感谢作者的分享. 1.引言 IM消息作为闲鱼用户重要的交易咨询工具,核心目标有两 ...

  10. 基于sass tailwindcss的传统页面开发脚手架

    这是一个基于sass和tailwindcss的快速开发传统多页面的npm脚手架. package.json { "name": "sass-tailwindcss-sta ...