在svg中的line和path根据路径返回x,y
由于path有自带的api可获得总长度,和某个长度返回的坐标。
var total = d.path.getTotalLength();//返回总长度
var point = d.path.getPointAtLength(num);//返回一个对象,包括x,y
想着进行了line的位置找寻:
svg中《line》的路径上的点的位置找寻方法
//根据line的起始点坐标返回一个对象,得到线段的长度
function GetLineLength(x1,y1,x2,y2){
var obj ={};
obj.x = x1;
obj.y = y1;
obj.length = Math.sqrt((x2 - x1)*(x2 - x1) + (y2- y1)*(y2- y1));
obj.sin = (y1-y2)/obj.length;
obj.cos = (x1-x2)/obj.length;
return obj;
};
//根据上变的函数得到的对象,传入某一长度,返回此长度在line上的x,y的坐标
function GetLintPoint(obj,number){
var point = {};
point.x = obj.x - number*obj.cos;
point.y = obj.y - number*obj.sin;
return obj1;
};
在svg中的line和path根据路径返回x,y的更多相关文章
- jsp中的basePath和path(绝对路径 相对路径)
在JSP中的如果使用 "相对路径" 则有 可能会出现问题. 因为 网页中的 "相对路径" , 他是相对于 "URL请求的地址" 去寻找资源. ...
- 【js类库Raphaël】基于svg中的path画40%表示的环型图
一.可供参考的文档资料. raphaeljs官网:http://raphaeljs.com/ w3c关于path的介绍:http://www.w3.org/TR/2003/REC-SVG11-200 ...
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- [翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
- 关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置
注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...
- SVG & convert polygon/polyline to path
SVG & convert polygon/polyline to path SVG Polygon/Polyline to Path Converter https://codepen.io ...
- [翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
- 在 SVG 中添加交互性
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...
随机推荐
- ubuntu14.04 JDK安装
JDK7 安装 1 sudo apt-get install openjdk-7-jdk 2 设置安装环境 在/etc/profile中追加: # Java support # export JAVA ...
- JQuery easyui Datagrid 分页事件
easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...
- C++ 实现Range类,用于常规遍历
PYTHON的Range类非常好用,所以用C++来简单实现下: // 实现Range类,用于遍历 // #include <string> class Range { public: / ...
- SpringMVC环境搭建 配置文件_2
applicationContext 命名空间: 引入命名空间,这样可以在代码中使用annotation xmlns="http://www.springframework.org/sche ...
- 二模15day1解题报告
T1.合并序列(minval) 给出长为 n的AB两个序列求两两相加中最小的n个. 据说有证明(在蓝书上,优先队列部分)先把A[1~n]+b[1]入队,然后每取一个a[x]+b[y]就把a[x]+b[ ...
- promise实例小球运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- arcgis中DEM如何生成等高线
地形图指比例尺大于1∶100万的着重表示地形的普通地图(根据经纬度进行分幅,常用有1:100万,1:50万,1比25万,1:15万,1:10万,1:5万等等).由于制图的区域范围比较小,因此能比较精确 ...
- 怎么解决svn清理失败且路径显示乱码问题
http://jingyan.baidu.com/article/295430f1d728830c7e0050f9.html 上面这个网址是百度经验给的方法,我也是参照这个方式解决了问题,虽然是解决了 ...
- 第六百零七八天 how can I 坚持
昨天去跟着谈了个项目,涨了些见识吧,关注下客户关注的,多考虑些,昨天谈完就下班,陪着sy去了趟西单换电池,苹果的售后也真是挺垃圾的. 今天本来是要搭搭环境的,结果代码没搞来,明天去客户那边搞代码,感觉 ...
- Java命令
java -classpath, 设定要搜索的类的路径,可以是目录,jar文件,zip文件(里面都是class文件),会覆盖掉所有的CLASSPATH的设定. 由于所要执行的类也是要搜索的类的一部分, ...