Javascript 像素范围

如果我有一个范围，我可以通过。有可能反过来吗？也就是说，给定一个矩形的像素创建一个范围。

是和否

如果您只想创建一个范围，这在一般情况下是不可能的，因为该范围在大多数浏览器中无法选择多个位置的文本（例如，如果“像素矩形”高度超过一行文本）。请注意，您提到的“像素矩形”更准确地说是一个剪切矩形

但如果您同意有多个范围，这是可能的。其主要思想是为剪切矩形的每一行创建一个范围。选择将不会显示在屏幕上（因为大多数浏览器不支持多个选择），但至少可以提取剪切矩形中的文本。我就是这样实现的：

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();
    }
}

var columnModeSelection={
startX:10，
startY:10，
完:20,，
完:30,，
SelectedExtanges:null//范围数组
};
createColumnModeSelection（）；
/**
通过返回与给定x/y位置对应的选择节点信息，模拟MSIE函数range.moveToPoint（x，y）。
@参数x点x坐标
@参数y点y坐标
@以字符形式返回节点和偏移量，如{node，offsetInsideNode}（例如，可以传递到range.setStart）
*/
函数getSelectionNodeInfo（x，y）{
var startRange=document.createRange（）；
getSelection（）.removeAllRanges（）；
window.getSelection（）.addRange（startRange）；
//实施说明：range.setStart偏移量为
//计入子元素的数量（如果有或
//如果没有孩子，在角色中。因为我们
//要计算字符数，我们需要
//获取没有子节点的节点。
var elem=document.elementFromPoint（x，y）；
var startNode=（elem.childNodes.length>0？elem.childNodes[0]：elem）；
var startCharIndexCharacter=-1；
做{
startCharIndexCharacter++；
setStart（startNode，startCharIndexCharacter）；
startRange.setEnd（startNode，startCharIndexCharacter+1）；
var rangeRect=startRange.getBoundingClientRect（）；
}while（rangeRect.left我最近为选择做了这项工作。在支持范围的浏览器中，它创建一个范围，然后选择它，所以去掉选择内容是很简单的