我设法在svg中找到路径的长度,但现在我想找到SVG中的line,rect,polygon和circle标签的长度,我现在真的迷失了,还有线索?或者是否已经存在一些像路径一样的功能?
答案 0 :(得分:11)
如果其他人想要找到这些标签的长度,我为每个标签制作了一些功能,对它们进行了测试,我说它们工作得很好,这就是我需要的。
var tools = {
/**
*
* Used to get the length of a rect
*
* @param el is the rect element ex $('.rect')
* @return the length of the rect in px
*/
getRectLength:function(el){
var w = el.attr('width');
var h = el.attr('height');
return (w*2)+(h*2);
},
/**
*
* Used to get the length of a Polygon
*
* @param el is the Polygon element ex $('.polygon')
* @return the length of the Polygon in px
*/
getPolygonLength:function(el){
var points = el.attr('points');
points = points.split(" ");
var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3;
for(var i = 0; i < points.length; i++){
var coords = points[i].split(",");
if(x1 == null && y1 == null){
if(/(\r\n|\n|\r)/gm.test(coords[0])){
coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,"");
coords[0] = coords[0].replace(/\s+/g,"");
}
if(/(\r\n|\n|\r)/gm.test(coords[1])){
coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,"");
coords[0] = coords[1].replace(/\s+/g,"");
}
x1 = coords[0];
y1 = coords[1];
x3 = coords[0];
y3 = coords[1];
}else{
if(coords[0] != "" && coords[1] != ""){
if(/(\r\n|\n|\r)/gm.test(coords[0])){
coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,"");
coords[0] = coords[0].replace(/\s+/g,"");
}
if(/(\r\n|\n|\r)/gm.test(coords[1])){
coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,"");
coords[0] = coords[1].replace(/\s+/g,"");
}
x2 = coords[0];
y2 = coords[1];
lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
x1 = x2;
y1 = y2;
if(i == points.length-2){
lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2));
}
}
}
}
return lineLength;
},
/**
*
* Used to get the length of a line
*
* @param el is the line element ex $('.line')
* @return the length of the line in px
*/
getLineLength:function(el){
var x1 = el.attr('x1');
var x2 = el.attr('x2');
var y1 = el.attr('y1');
var y2 = el.attr('y2');
var lineLength = Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
return lineLength;
},
/**
*
* Used to get the length of a circle
*
* @param el is the circle element
* @return the length of the circle in px
*/
getCircleLength:function(el){
var r = el.attr('r');
var circleLength = 2 * Math.PI * r;
return circleLength;
},
/**
*
* Used to get the length of the path
*
* @param el is the path element
* @return the length of the path in px
*/
getPathLength:function(el){
var pathCoords = el.get(0);
var pathLength = pathCoords.getTotalLength();
return pathLength;
}
}
答案 1 :(得分:8)
我认为您正在错误地查看问题:
rectangle = 2 * (width + height)
的长度
线的长度(对于任何非垂直线使用毕达哥拉斯定理c ^ 2 = a ^ 2 + b ^ 2)或使用(x1到x2)用于水平,(y1到y2)用于垂直
长度圆= 2×π×半径 ......等
答案 2 :(得分:2)
在SVG 2中,所有几何元素都将具有pathLength属性,但截至2017年5月,这仍然需要在大多数浏览器中实现。
有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement。
我们可以在未来证明@zetcoby的答案:
if( el.pathLength ) {
return el.pathLength;
}
else {
// rest of code...
}
答案 3 :(得分:1)
我尝试使用ZetCoby为多边形指定的答案,但在测试中我发现它返回的路径长度是错误的。
示例:
<polygon points="10.524,10.524 10.524,24.525 24.525,24.525 24.525,10.524" style="fill:none;stroke-width:0.2;stroke:black"></polygon>
上面的多边形的长度应为56
,但getPolygonLength(el)
函数的返回值为61.79898987322332
。
我编写了一个算法来正确计算SVG多边形的路径长度,所以我认为我应该回复它,因为这是谷歌在搜索这个问题时的第一次命中。
这是我的功能。享受...
function polygon_length(el) {
var points = el.attr('points');
points = points.split(' ');
if (points.length > 1) {
function coord(c_str) {
var c = c_str.split(',');
if (c.length != 2) {
return; // return undefined
}
if (isNaN(c[0]) || isNaN(c[1])) {
return;
}
return [parseFloat(c[0]), parseFloat(c[1])];
}
function dist(c1, c2) {
if (c1 != undefined && c2 != undefined) {
return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
} else {
return 0;
}
}
var len = 0;
// measure polygon
if (points.length > 2) {
for (var i=0; i<points.length-1; i++) {
len += dist(coord(points[i]), coord(points[i+1]));
}
}
// measure line or measure polygon close line
len += dist(coord(points[0]), coord(points[points.length-1]));
return len;
} else {
return 0;
}
}