需求描述:

使用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)

在本例中,起始点是确定的

startX =
startY = 27.27
rx = ry = 272.73

那么,如何计算终止点的坐标?

x= startX + sin(d);
y= startY + cos(d);
逆时针方向则应该是减去。
 
但是,需要注意的是,在js中Math.sin()参数是弧度,而不是角度。而弧度

arc = deg * 2Math.PI / 360
 
在本例中,角度不会超过180度,所以都是小弧线,large-arc-flag=0.

最终代码:

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 画弧线的更多相关文章

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

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

  2. SVG操作插件:SVG.JS 个人提取部分实用中文文档

    先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址) 创建SVG文档 var draw = SVG('drawing'). ...

  3. SVG.js 文本绘制整理

    1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...

  4. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  5. SVG.js 基础图形绘制整理(一)

    一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...

  6. Svg.Js 父类的基础操作

    一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...

  7. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  8. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  9. svg.js教程及使用手册详解(一)

    做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...

随机推荐

  1. 用element-ui进行文件的上传

    在进项的项目中,我使用vue配合element搭建的项目,现在需要用到上传文件的写法!现在列举下我的项目中所使用的上传文件的方法! <el-upload style="display: ...

  2. nodejs第一天

    按下node进入交互模式  ,按两次ctrl  + c  退出  或者输.exit退出

  3. php----等比缩放图片

    <?php /** * Created by PhpStorm. * User: admin * Date: 2019/11/19 * Time: 8:54 */ $filename = 'lo ...

  4. [洛谷P3243] 菜肴制作

    问题描述 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为1. 由于菜肴 ...

  5. Installing MacOS to VirtualBox

    https://medium.com/@twister.mr/installing-macos-to-virtualbox-1fcc5cf22801

  6. Java——容器(Set)

    [Set接口] <1>Set接口是Collection的子接口,Set接口没有提供额外的方法. <2>实现Set接口的容器类中的元素是没有顺序的,而且不可以重复. <3& ...

  7. HDU 6582 Path

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Submissio ...

  8. FLASH位宽为8、16、32时,CPU与外设之间地址线的连接方法

    转 http://blog.csdn.net/linweig/article/details/5556819 flash连接CPU时,根据不同的数据宽度,比如16位的NOR FLASH (A0-A19 ...

  9. C# 创建临时文件(转帖)

    1. 在临时文件只能够创建一个临时文件并返回该文件的完整路径 // 在临时文件只能够创建一个临时文件并返回该文件的完整路径: // C:\Documents and Settings\YourName ...

  10. 学习日记18、easyui 文件框上传文件

    前台 <tr> <td style="width:100px; text-align:right;"> @Html.LabelFor(model => ...