3

jQueryzepto.jsなどでは、次のように言うことができます

var position = $('a:first').position();

ただし、a-tag は、単純な長方形 (位置とサイズ) よりも複雑な形状を持つ複数の行にまたがることができます。私が取得したいのは、要素のパスです。

例

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.

では、任意の要素のポリゴンを取得する方法はありますか?

4

1 に答える 1

1

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
于 2013-01-21T16:15:31.140 に答える