SVG.JS 画弧线
需求描述:
使用svg.js,绘制一个弧线。下图绿色弧线。
准备工作:
1、了解SVG Path中的A指令
详细文档,请戳这里
给定x半径、y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧线,一条大弧线,一条小弧线。
所以,A指令的参数设置如下:
绝对坐标
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
相对坐标
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
参数说明:
- rx x半径
- ry y半径
- x-axis-rotation x轴旋转角度
- large-arc-flag 1,表示大角弧度,大于180度;0,表示小角弧度,小于180度。
- sweep-flag 1,表示从起点到终点绕中心顺时针方向;0,表示逆时针方向。
- x 弧线终点x坐标
- y 弧线终点y坐标
DEMO
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<path d="M100 0 A100 100 0 0 1 200 100 " stroke="lime" stroke-width="3" fill-opacity="0.5" />
<path d="M100 100 A100 100 0 1 1 200 200 " stroke="lime" stroke-width="3" fill-opacity="0.5" />
</svg>
2、问题分析
要实现图中的弧线,需要计算path的d属性,需要确定的元素有:起始点(startX, startY),rx,ry,终止点(x, y)
在本例中,起始点是确定的
那么,如何计算终止点的坐标?
最终代码:
drawAWACurve: function () { var AWA = +this.model.get('AWA'); var sweepFlag = AWA >= 0 ? 1 : 0; //1 顺时针,0逆时针
var deg = Math.abs(AWA); var startX = 300; var startY = 27.27;
var r = 272.73;
var x = 0, y = 0; //终点坐标 // 计算终点的坐标 deg是角度,Math.sin(arc) arc = 2Math.PI / 360
var arc = Math.sin(2 * Math.PI / 360 * deg);
if (sweepFlag == 1) {
x = startX + r * Math.sin(2 * Math.PI / 360 * deg);
y = startY + r - r * Math.cos(2 * Math.PI / 360 * deg);
} else {
x = startX - r * Math.sin(2 * Math.PI / 360 * deg);
y = startY + r - r * Math.cos(2 * Math.PI / 360 * deg);
} var d = 'M' + startX + ' ' + startY + ' A' + r + ' ' + r + ' 0 0 ' + sweepFlag + ' ' + x + ' ' + y + ' ';
var id = this.config.panelId + '_AWACurve';
var pathNode = SVG.get('#' + id);
if (!pathNode) { return; }
var color = sweepFlag == 1 ? 'lime' : 'red'; pathNode.attr({ 'd': d }); pathNode.animate(700, '<>').attr({ 'stroke': color }); },
SVG.JS 画弧线的更多相关文章
- svg.js教程及使用手册详解(二)
上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...
- SVG操作插件:SVG.JS 个人提取部分实用中文文档
先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址) 创建SVG文档 var draw = SVG('drawing'). ...
- SVG.js 文本绘制整理
1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- SVG.js 基础图形绘制整理(一)
一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...
- Svg.Js 父类的基础操作
一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...
- 基于svg.js实现对图形的拖拽、选择和编辑操作
本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...
- 在高德地图上用svg.js绘制简单图形
这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...
- svg.js教程及使用手册详解(一)
做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...
随机推荐
- 用element-ui进行文件的上传
在进项的项目中,我使用vue配合element搭建的项目,现在需要用到上传文件的写法!现在列举下我的项目中所使用的上传文件的方法! <el-upload style="display: ...
- nodejs第一天
按下node进入交互模式 ,按两次ctrl + c 退出 或者输.exit退出
- php----等比缩放图片
<?php /** * Created by PhpStorm. * User: admin * Date: 2019/11/19 * Time: 8:54 */ $filename = 'lo ...
- [洛谷P3243] 菜肴制作
问题描述 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为1. 由于菜肴 ...
- Installing MacOS to VirtualBox
https://medium.com/@twister.mr/installing-macos-to-virtualbox-1fcc5cf22801
- Java——容器(Set)
[Set接口] <1>Set接口是Collection的子接口,Set接口没有提供额外的方法. <2>实现Set接口的容器类中的元素是没有顺序的,而且不可以重复. <3& ...
- HDU 6582 Path
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Submissio ...
- FLASH位宽为8、16、32时,CPU与外设之间地址线的连接方法
转 http://blog.csdn.net/linweig/article/details/5556819 flash连接CPU时,根据不同的数据宽度,比如16位的NOR FLASH (A0-A19 ...
- C# 创建临时文件(转帖)
1. 在临时文件只能够创建一个临时文件并返回该文件的完整路径 // 在临时文件只能够创建一个临时文件并返回该文件的完整路径: // C:\Documents and Settings\YourName ...
- 学习日记18、easyui 文件框上传文件
前台 <tr> <td style="width:100px; text-align:right;"> @Html.LabelFor(model => ...