UIWebViewの範囲の四角形

Question

私はUIWebViewに静的なテキストコンテンツを持ち、Webビューのコンテンツに特定のNSRangeのテキストの矩形を取得する必要があります。

これについては、javascriptを使用していますが、どこから始めたらよいか分かりません。あなたはこれについてどうやって行きますか？

Answer 1

ここで私が作ってみたソリューションです、実際に取得する方法についてアントンに感謝ノードからのClientRect。私が基本的に実装したのは、プレーンテキストの範囲から開始ノード、ノードの開始位置、終了ノード、ノードの終了位置に到達する方法です。すべてが理にかなっているが、問題はNSRangeがこれを無視し、テキストだけで動作しながら、コンテンツがいくつかのdivのとフォントタグのが含まれていることです

function boundingRectForRange(rangeStart, rangeEnd, node) { 
    var startNode = null; 
    var endNode = null; 
    var startPositionInNode = 0; 
    var endPositionInNode = 0; 

    var elapsed = 0; 
    var rangeStartComputed = 0; 

    var childNodes = node.childNodes; 

    for (var i=0;i<childNodes.length;i++) { 
     var item = childNodes[i]; 

     var textContent = item.textContent; 
     var length = textContent.length; 
     var newElapsed = elapsed + length; 

     if (rangeStart <= newElapsed && rangeStartComputed == 0) { 
      startNode = item; 
      startPositionInNode = rangeStart - elapsed; 
      rangeStartComputed = 1; 
     } 

     if (rangeEnd <= newElapsed && rangeStartComputed == 1) { 
      endNode = item; 
      endPositionInNode = rangeEnd - elapsed; 
      break; 
     } 

     elapsed = newElapsed; 
    } 

    if (startNode == null || endNode == null) {  
     return false; 
    } 

    if (startNode.toString() != '[object Text]') { 
     startNode = startNode.childNodes[0]; 
    } 

    if (endNode.toString() != '[object Text]') { 
     endNode = endNode.childNodes[0]; 
    } 

    // Got every sorted let's get these co-ordinates 
    var range = document.createRange(); 
    range.setStart(startNode, startPositionInNode); 
    range.setEnd(endNode, endPositionInNode); 

    var rects = range.getClientRects(); // Array of rects 
    var firstRect = rects[0]; 

    var x = firstRect.left; 
    var width = firstRect.right - x; 

    var height = firstRect.bottom - firstRect.top; 
    var y = firstRect.top;   

    var retVal = '{{'+x+','+y+'},{'+width+','+height+'}}'; 

    return retVal; 
} 

Answer 2

あなたはそれが、このコードで行うことができるテキストのClientRectsを取得するためにRangeオブジェクトが必要であることを意味している場合：

var rangeW3C = document.createRange(), 
    textNode = document.getElementById('someId').firstChild; // assume that it would be point to a text node with content 

rangeW3C.selectNode(textNode); 

// if you need rect of all text node 
var textNodeRect = rangeW3C.getClientRects(); // array-like object with rects 

// if you need rect of some character in text node, for example first character 
rangeW3C.setStart(textNode, 0); 
rangeW3C.setEnd(textNode, 1); 

var firstCharacterRect = rangeW3C.getClientRects()[0];