需求描述:

使用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. odoo ERP 系统安装与使用

    https://hub.docker.com/_/odoo/ #!/bin/bash sudo docker pull postgres:10sudo docker pull odoo:11.0 su ...

  2. Linux服务器安装系统之1-LSI阵列卡raid5配置方法

  3. PAT Advanced 1035 Password (20 分)

    To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...

  4. 深度复数网络 Deep Complex Networks

    转自:https://www.jiqizhixin.com/articles/7b1646c4-f9ae-4d5f-aa38-a6e5b42ec475  (如有版权问题,请联系本人) 目前绝大多数深度 ...

  5. AtCoder Beginner Contest 089 D - Practical Skill Test

    Problem Statement We have a grid with H rows and W columns. The square at the i-th row and the j-th ...

  6. windows javaee 安装

    一. 下载jdk 并安装 二. 配置环境变量 JAVA_HOME:D:\Java\jdk1..0_25 CLASSPATH :.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt. ...

  7. scoket、TCP、UDP、WebService选型

    抱着去转型产品经理的方向去面试了一家公司,面试完很惭愧,不过见到了人事我也很意外,因为其实表现也没那么好,不过在此谈谈我的感受. 1.有3轮,前2轮都是先让我做自我介绍(我都说的很干脆,直接哪年毕业, ...

  8. apache Internal Server Error 解决方法

    https://blog.csdn.net/qq_33684377/article/details/78536548 https://blog.csdn.net/LJFPHP/article/deta ...

  9. Qt android 配置

    http://www.cnblogs.com/ztzheng/p/3703716.html

  10. 20180912-Java实例02

    Java 实例 – 删除字符串中的一个字符 以下实例中我们通过字符串函数 substring() 函数来删除字符串中的一个字符,我们将功能封装在 removeCharAt 函数中. // Main.j ...