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 画布中绘制坐标轴变得 ...
随机推荐
- 在CodeBolcks+wxWidgets+wxSmith下的C++编程教程——用向导创建一个wxWidgets项目(sTetris)
0.前言 我想通过编写一个完整的游戏程序方式引导读者体验程序设计的全过程.我将采用多种方式编写具有相同效果的应用程序,并通过不同方式形成的代码和实现方法的对比来理解程序开发更深层的知识. 了解我编写教 ...
- uni-app Vue3项目引入Tailwind CSS
前情 Tailwind CSS 是一个原子类 CSS 框架,它将基础的 CSS 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错.它的工作原理是扫描所有 HTML 文件.JavaScri ...
- FastExcel 合并单元格(相当的行数据,进行合并)
目录 需求 思路 实现 Excel导出单元格全量合并策略 日期格式转换 接口代码 Service DTO 使用FastExcel数据导出:官网: https://idev.cn/fastexcel/z ...
- shell内置字符串替换
shell变量赋值语法: 使用规则 解释单引号 所见即所得,即输出时会将单引号内的所有內容都原样输出,或者描述为单引号里面看到的是什么就会输出什么,这称为强引用双引号 (默认) 输出双引号内的所有内容 ...
- Mybatis Plus条件构造器condition动态判断优化
ConditionQueryWrapper package com.common.util; import com.baomidou.mybatisplus.core.conditions.query ...
- 【AIGC】Embedding与LLM:token长度限制困局下,长文本LLM应用的暂缓之计
[详细内容首发于微信公众号(Hobbes View)] 什么是Embedding? Embedding是一种多维向量数组,由一系列数字组成,可以代表任何事物,如文本.音乐.视频等.在这里我们将重点关注 ...
- C# Unit test TestInitialize\TestCleanp
C# TestInitialize\TestCleanp ※※冰馨※※ 2020-12-15 09:19:37 75 收藏分类专栏: VS版权 VS专栏收录该内容197 篇文章1 订阅订阅专栏带有[C ...
- java多线程与线程池-copy
1. 场景描述 以前多线程也常用,这次因需再页面上用到多线程,如下图,总结下,有需要的朋友可以参考下. 2. 解决方案 2.1 线程池概念 线程池官方定义不说了,通俗说下:池子的概念,事先(预定义)创 ...
- 高并发编程-ReentrantReadWriteLock深入解析
要点解说ReentrantLock在并发情况下只允许单个线程执行受保护的代码,而在大部分应用中都是读多写少,所以,如果使用ReentrantLock实现这种对共享数据的并发访问控制,将严重影响整体的性 ...
- Redis组件的特性,实现一个分布式限流
分布式---基于Redis进行接口IP限流 场景 为了防止我们的接口被人恶意访问,比如有人通过JMeter工具频繁访问我们的接口,导致接口响应变慢甚至崩溃,所以我们需要对一些特定的接口进行IP限流,即 ...