픽셀 범위

Question

범위가있는 경우 getBoundingClientRect을 통해 경계 사각형을 가져올 수 있습니다. 그 반대가 가능합니까? 즉, 픽셀의 사각형이 주어진 경우 Range를 만듭니다.

Answer 1

예 아니요.

범위가 대부분의 브라우저에서 여러 위치의 텍스트를 선택할 수 없기 때문에 하나의 범위 만 만들려는 경우 일반적으로 불가능합니다 (예 : "픽셀 사각형"높이가 둘 이상의 텍스트 인 경우). 선). 여기서 언급 한 "픽셀의 사각형"은 더 정확하게 클리핑 사각형입니다.

복수 범위에 동의하는 경우 가능합니다. 주요 아이디어는 자르기 직사각형의 각 라인에 하나의 범위를 만드는 것입니다. 대부분의 브라우저는 다중 선택을 지원하지 않기 때문에 선택 항목이 화면에 표시되지 않지만 최소한 클리핑 사각형에있는 텍스트를 추출 할 수 있습니다. 이것은 내가 그것을 구현하는 방법입니다

var columnModeSelection = { 
    startX:10, 
    startY:10, 
    endX:20, 
    endY:30, 
    selectedTextRanges:null // an Array of Range 
}; 
createColumnModeSelection(); 

/** 
Emulates MSIE function range.moveToPoint(x,y) by returning the selection node info which corresponds to the given x/y location. 
@param x the point X coordinate 
@param y the point Y coordinate 
@return the node and offset in characters as {node,offsetInsideNode} (e.g. can be passed to range.setStart) 
*/ 
function getSelectionNodeInfo(x, y) { 
    var startRange = document.createRange(); 
    window.getSelection().removeAllRanges(); 
    window.getSelection().addRange(startRange); 

    // Implementation note: range.setStart offset is 
    // counted in number of child elements if any or 
    // in characters if there is no childs. Since we 
    // want to compute in number of chars, we need to 
    // get the node which has no child. 
    var elem = document.elementFromPoint(x, y); 
    var startNode = (elem.childNodes.length>0?elem.childNodes[0]:elem); 
    var startCharIndexCharacter = -1; 
    do { 
     startCharIndexCharacter++; 
     startRange.setStart(startNode, startCharIndexCharacter); 
     startRange.setEnd(startNode, startCharIndexCharacter+1); 
     var rangeRect = startRange.getBoundingClientRect(); 
    } while (rangeRect.left<x && startCharIndexCharacter<startNode.length-1); 

    return {node:startNode, offsetInsideNode:startCharIndexCharacter}; 
} 

/** 
Copy user selection to clipboard in plain text. 
Multibrowser: supported under MSIE and WebKit 
*/ 
function createColumnModeSelection() { 
    // build a TextRange for each line to select 
    var startY = columnModeSelection.startY; 
    columnModeSelection.selectedTextRanges=new Array(); 
    while (startY<columnModeSelection.endY) { 

     // select the line 
     var range = null; 
     if (document.selection) { 
      // MSIE 
      // Implementation note: the TextRange cannot be created from pixel 
      // coordinates, only the start point can. Thus, we are creating two 
      // TextRanges with a start point and set the end point of the first 
      // range to the start point of the end range. 

      // set the start point    
      range = document.selection.createRange(); 
      range.moveToPoint(columnModeSelection.startX, startY); 
      // set the end point   
      var endRange = document.selection.createRange(); 
      endRange.moveToPoint(columnModeSelection.endX, startY); // set the first line end 
      range.setEndPoint("EndToStart", endRange); 
      // create the selection 
      range.select(); 
     } else { 
      // other browsers 
      var lineStartNodeInfo = getSelectionNodeInfo(columnModeSelection.startX, startY); 
      var lineEndNodeInfo = getSelectionNodeInfo(columnModeSelection.endX, startY); 
      range = document.createRange(); 
      range.setStart(lineStartNodeInfo.node, lineStartNodeInfo.offsetInsideNode); 
      range.setEnd(lineEndNodeInfo.node, lineEndNodeInfo.offsetInsideNode+1); 
     } 

     // keep the selection for later usage 
     if (range!=null) { 
      columnModeSelection.selectedTextRanges.push(range); 
     } 

     // go to the next line 
     var elem = document.elementFromPoint(columnModeSelection.startX, startY); 
     var lineHeight = elem.clientHeight; 
     startY += lineHeight; 
    } 

    // clear the last selected range 
    if (document.selection) { 
     // MSIE 
     document.selection.empty(); 
    } else { 
     // Safari, Firefox 
     window.getSelection().removeAllRanges(); 
    } 
} 

이 다음 브라우저에서 테스트되었습니다

• MSIE 7, MSIE 9
• 파이어 폭스 5, 파이어 폭스 10
• 크롬 9
• Safari 5

Answer 2

나는 이것을 최근에 선택했습니다. Range를 지원하는 브라우저에서 범위를 만든 다음 선택하므로 선택 항목을 제거하는 것이 쉽습니다.

Select from pixel coordinates for FF and Google Chrome