如何在HTML中获取元素的形状/多边形/边界路径/框架
How to get shape / polygon / bounding path / frame of element in HTML?
在jQuery, zepto.js
等中你可以输入
var position = $('a:first').position();
但是a-标签可以跨越几行,其形状比简单的矩形(位置和大小)更复杂。我想要得到的是元素的路径。
例子The pipes in this examples is meant to illude |||||||
|||||| |||| || ||||||| an a-tag spanning over two lines.
Consisting of two different rects OR 8 different points.
那么,有没有办法得到任何元素的多边形呢?
http://jsfiddle.net/mattdlockyer/EEVV2/
这将为您提供链接的每一行的边界点。
由于建立一个多边形将取决于形状,我真的没有时间进入这个,但我认为这是一个合理的起点。
希望有帮助!
$(document).ready(function () {
var words = $('a').text().split(' '); //break the link's words into array
for (var i = 0; i < words.length; ++i) {
words[i] = '<span>' + words[i] + '</span> '; //wrap each word in a span
}
words.join(' '); //join the words
$('a').html(words); //replace the link html with the words wrapped in spans
var points = []; //to store our points
var lastIndex = $('a span').length - 1; //so we know we've hit the last point
var first; //keep track of first point
$('a span').each(function (i) {
var pos = $(this).position();
if (i > 0) {
if (i != lastIndex) {
if (points[points.length - 1].top < pos.top) { //have we hit a new line?
var newPos = $($('a span')[i - 1]).position();
if (newPos.left != first.left) { //check if we are on the right side of the object
newPos.left += $($('a span')[i - 1]).width(); //add the width of the word
points.push(newPos); //push this point
} else {
points.push(newPos); //we are on the left side, push the point without the width of the word
}
//$($('a span')[i - 1]).addClass('red'); //useful for debugging
}
} else {
var bottomLineHeight = $(this).height();
pos.left += $(this).width(); //add width to last point
pos.top += bottomLineHeight; //add height to last point, push later
points[points.length - 1].top += bottomLineHeight; //add height to second to last point
points.push(pos); //push last point
}
} else {
points.push(pos); //push first point
first = pos; //keep track of topLeft point (first)
}
});
//for printing out points
var html = '';
$(points).each(function (i, obj) {
html += '<p>(' + obj.left + ', ' + obj.top + ')';
});
$('#result').html(html);
});//ready
相关文章:
- SVG/JavaScript:尝试选择和更改多边形点
- 如何获取谷歌地图多边形的当前fillColor
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 上传带有XMLHttprequest的文件-多部分/表单数据中缺少边界
- 使用Google Maps API驱动时间多边形
- Matlab点在多边形中
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 如何在fabric js中向多边形添加图像
- 使用css跨浏览器动态剪切多边形
- fabric js多边形集合坐标
- 从传单数据到GeoJSON的多边形
- 我们可以为Cesium中使用CZML绘制的多边形设置outlineWidth属性吗
- 如何在pixi.js多边形上放置纹理
- 精灵从pixi到p2的边界多边形
- 如何在mongodb的边界框中获取任何项目(点,线字符串,多边形)
- 谷歌地图绘制多边形并缩放到其边界
- 从多边形(多边形)边界内的多边形中心生成n个随机点(Lat-Lng对)
- 我的谷歌地图多边形边界和缩放不起作用
- 如何在HTML中获取元素的形状/多边形/边界路径/框架