在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 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...
随机推荐
- Laravel学习笔记(二)Laravel 应用程序的体系结构
在一切环境就绪了,当然就要开始了解框架了. 站在巨人的肩膀上,学东西会事半功倍.我在网上找到一篇好文章,正好可以让我轻松了解Laravel应用程序的体系结构.因此借来直接用了. 该章节内容翻译自< ...
- windows下CMake使用图文手册 Part 2
例子2:有目录的项目 我现在有个文件夹ProjectDate,有如下文件结构 E:. │ CMakeLists.txt │ ├─include │ Date.h │ └─src ...
- equal与==
首先做的是比较引用,引用的如果是同一个对象,直接返回true.做完return就结束了.如果引用不是同一个地址,就往下走,判断是否是String的一个实例.同样,不是的话直接返回.是的话,拿字符串的长 ...
- EF初级入门 (一对多、多对多)
1.创建新项目并引入Entity Framework 然后就可以开始使用EF了 开始使用一对多 Users 用户类,UserDetail用户详情类:一个用户对应多个详情(仅用于测试) public c ...
- MVC之路由规则 (自定义,约束,debug)
自定义路由规则的要求,小范围写在前,大范围写在后.路由规则可以注册多条,路由规则的名称不能重复路由规则有顺序,并且按照顺序进行匹配,建议小范围写在前,大范围写在后.路由规则可以设置约束 即正则表达式路 ...
- python中获取上一个月一号的方法
业务场景: 我们经常会跑一些月级别或者周级别的报表. 周级别的报表还比较好确定,就是七天前的直接用timedelta(days=7)来获取开始日期就可以了; 但是月级别的报表就要麻烦一些,因为time ...
- webservice wsdl axis2报错 Provider com.bea.xml.stream.MXParserFactory not found
错误信息: Exception in thread "main" javax.xml.stream.FactoryConfigurationError: Provider com. ...
- ARCGIS多种影像裁剪
在互联网上下载的遥感影像都进行过分幅处理,下载下来的影像多是规则的四方形,而在进行遥感影像研究时,多是针对特定区域来进行,比如研究北京市的遥感影像,不在北京市范围内的影像对于研究者就没有利用意义,如果 ...
- VAssistX使用小窍门
日常使用中的一些VAssistX使用小窍门,简单总结下 一,修改VAssistX默认缓存文件路径,防止默认C盘被占用空间过大 1. 打开注册表HKCU\Software\Whole Tomato,新 ...
- Python自动化 【第十七篇】:jQuery介绍
jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...