绘制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. PictureMarkerSymbol透明的问题

    由于我使用的是位图图片,所以不可能将图片背景处理成透明.不过还是可以通过参数的设定来达到这种效果. PictureMarkerSymbol pPMS = new PictureMarkerSymbol ...

  2. openEuler欧拉系统重置root密码

    步骤: 系统启动时,出现如下页面,按e进入内核编辑模式 进入如下页面 按下光标后,找到linux开头这一行,修改ro为rw,并在行尾添加init=/bin/sh,修改后效果如下,在crtl+x保存后开 ...

  3. flutter问题汇总

    Text文字居中 Text(           'You will need to post a photo before you can play!',           textAlign:  ...

  4. 8.mysql表分区

    MySQL表分区 表分区是将⼀个表的数据按照⼀定的规则⽔平划分为不同的逻辑块,并分别进⾏物理存储,这个规则就叫做分区函数,可以有不同的分区规则 5.7可以通过show plugins语句查看当前MyS ...

  5. 【C#】【平时作业】习题-7-继承、抽象与多态

    相关概念 什么是继承 继承定义了如何根据现有类创先新类的过程 任何类都可以从另外一个类继承 一个派生出来的子类具有这个类的所有公共属性和方法 类的继承机制 创建新类所根据的基础类称为基类或父类,新建的 ...

  6. Mac安装thrift因bison报错的解决办法

    安装thrift时,报错: Bison version 2.5 or higher must be installed on the system! 使用brew install bison 安装新版 ...

  7. TheScope, Visibility and Lifetime of Variables

    C language-- TheScope, Visibility and Lifetime of Variables 全局变量 普通全局变量 //file1 #include<stdio.h& ...

  8. Qt音视频开发36-超时检测和自动重连的设计

    一.前言 如果网络环境正常设备正常,视频监控系统一般都是按照正常运行下去,不会出现什么问题,但是实际情况会很不同,奇奇怪怪七七八八的问题都会出现,就比如网络出了问题都有很多情况(交换机故障.网线故障. ...

  9. Qt音视频开发19-vlc内核各种事件通知

    一.前言 对于使用第三方的sdk库做开发,除了基本的操作函数接口外,还希望通过事件机制拿到消息通知,比如当前播放进度.音量值变化.静音变化.文件长度.播放结束等,有了这些才是完整的播放功能,在vlc中 ...

  10. vue辅助函数mapState和mapGetter前面三个点到底是什么意思:对象展开运算符

    import store from "./store" computed: { useName: function() { return store.state.userName ...