大家好,我是一个刚入职的前端小白,入职后一直做关于svg 的东西,我将自以为很方便的方法提供给大家。

function svgPathCurv(a,b,curv) { /* * 弯曲函数. * a:a点的坐标{x:10,y:10} * b:b点的坐标{x:10,y:20} * curv:弯曲程度 取值 -5 到 5 */ curv = curv ? curv : 0; var s, k2, controX, controY, q, l, path = ''; var s = 'M' + a.x + ',' + a.y + ' '; /* * 控制点必须在line的中垂线上 * **求出k2的中垂线(中垂线公式)** */ var x1=a.x;x2=b.x;y1=a.y;y2=b.y; k2 = -(x2 - x1) / (y2 - y1); /* * 弯曲程度是根据中垂线斜率决定固定控制点的X坐标或者Y坐标,通过中垂线公式求出另一个坐标 * 默认A/B中点的坐标+curv*30,可以通过改基数30改变传入的参数范围 */ if(k2 < 2 && k2 > -2) { controX = (x2 + x1) / 2 + curv * 30; controX = controX < 0 ? -controX : controX; controY = k2 * (controX - (x1 + x2) / 2) + (y1 + y2) / 2; controY = controY < 0 ? -controY : controY; } else { controY = (y2 + y1) / 2 + curv * 30; controY = controY < 0 ? -controY : controY; controX = (controY - (y1 + y2) / 2) / k2 + (x1 + x2) / 2; controX = controX < 0 ? -controX : controX; } //定义控制点的位置 q = 'Q' + controX + ',' + controY + ' '; //l=lineto l = x2 + ',' + y2 + ' '; //结果例: M10,10Q35,15,10,20 path = s + q + l; return path; }

坐标转换成SVG的path路径的更多相关文章

  1. svg(1) path路径

    注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/2707 ...

  2. SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  3. SVG格式图片转成HTML中SVG的Path路径

    AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...

  4. 5分钟看懂svg path 路径的所有命令(更有API解释、有图、有图文对比解析)

    友情提示:更多详情.每个命令的例子.参数变化对比图文详解,欢迎关注九十七度的博客:SVG<Path>命令详解 M = moveto M x y 移动到指定坐标,xy分别为x轴和y轴的坐标点 ...

  5. 简单聊一聊那些svg的沿路径运动

    之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...

  6. d3.js path路径

    转自:http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等. ...

  7. SVG的path的使用

    SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...

  8. [转]sudo找不到命令:修改sudo的PATH路径

    sudo有时候会出现找不到命令,而明明PATH路径下包含该命令,让人疑惑.其实出现这种情况的原因,主要是因为当 sudo以管理权限执行命令的时候,linux将PATH环境变量进行了重置,当然这主要是因 ...

  9. svg实现绘制路径动画

    1,首先用svg绘制一条path路径,然后进行如下操作 ps: 下面是svg中两个属性及值的意义 stroke-dasharray是让你指定画出的线段每段的长度,第二个值是各段之间空隙的长度. str ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:基于项的项部件(Item Widgets(Item-Based))概述

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Model/View架构中的视图部件是基于模型的项视图(Item Views(Model-Based ...

  2. PyQt(Python+Qt)学习随笔:Model中项的标记flags取值及枚举类型Qt.ItemFlag

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Model中的项可以通过flags()方法查询对应项是否能被选择.拖拽或其他操作,对应的返回值类型 ...

  3. 【JAVA并发第一篇】Java的进程与线程

    1.进程与线程 1.1.进程 进程可以看作是程序的执行过程.一个程序的运行需要CPU时间.内存空间.文件以及I/O等资源.操作系统就是以进程为单位来分配这些资源的,所以说进程是分配资源的基本单位. ( ...

  4. 性能测试学习之路 (二)jmeter详解(jmeter执行顺序 && 作用域 && 断言 && 事务 &&集合点 )

    1 Jmeter 工作区介绍 jmeter工作区分为3个部分:目录树.测试计划编辑区域.菜单栏. 2 Jmeter 执行顺序规则 Jmeter执行顺序规则如下: 配置元件 前置处理器 定时器 采样器s ...

  5. Day3 【Scrum 冲刺博客】

    每日会议总结 昨天已完成的工作 方晓莹(PIPIYing) 开始人员管理页 搭建与后台对接的相关配置 方子茵(Laa-L) 完成车辆查询接口 黄芯悦(Sheaxx) 完善社区通知页面 完善社区活动页面 ...

  6. 第 2 篇 Scrum 冲刺博客

    一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 ①大部分同学成功用java连接数据库 ②前端和后台的成员成功讨论并了解具体需求 3.今天计划完成的工作 ①帮助不会的同学连接数据库 ②登录识别 ...

  7. CCF统一省选 Day2 题解

    此题解是教练给我的作业,AK了本场比赛的人,以及认为题目简单的人可以不必看 T1 算法一 暴力枚举对信号站顺序的不同排列,然后对代价取\(\min\)即可. 时间复杂度\(O(m! \cdot n)\ ...

  8. AcWing 232. 守卫者的挑战

    题目链接 大型补档计划. 比较显然的dp 设 \(f[i][j][k]\) 为前 \(i\) 次,擂台上了 \(j\) 次,空闲容量(背包 - 使用的)为 \(k\) 的概率. 不上擂台的转移:\(f ...

  9. Java集合源码分析(六)——ConcurrentHashMap

    目录 简介 源码分析 父类 接口 字段 内部类 1.链表节点结构 2.树根结构 3.树节点结构 方法 1.构造方法 2.基本并发方法 3.初始化表数组的操作 4.修改添加元素 5.统计元素数量 6.扩 ...

  10. echarts饼图默认状态高亮显示

    需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...