如何应用圆角边框突出显示/选择

Question

我已经在项目中使用了Visual Studio Online一段时间,并且它们在其在线代码查看器中将圆形边框应用于选择的方式非常有趣:

我已经尝试检查元素并寻找某种自定义CSS,但没有运气.

我有一种感觉,这需要一些复杂的"黑客"来使它工作,但它似乎非常有趣,因为我以前从未见过它.

他们如何能够将圆形边框应用于选择？

注意:正常选择在选择时完全隐藏,圆角选择跟随光标,就像常规选择一样.不是在你选择了什么之后.

编辑:我创建了一个 @Coma答案的分支,它应该可以在Firefox中使用并在鼠标移动时选择:

$(document).on('mousemove', function () {

(在某些情况下,边界仍然可以使用工作.)

Answer 1

我可以向你保证,这与html,css边框半径或突出显示无关.证据？

1. 整个选择显示为具有多个边和简洁的单个块,并且不对称.在没有使用SVG或Canvas的情况下,无法直接在html中使用多边形状.(嗯,这是一个可以讨论的可能性)
2. 如果它不是一个单独的块,但实际上多个行突出显示或用某种HTML或CSS或JS标记,那么就不能有这样一个外向的曲线:
   
   (总有可能.例如,您可以使用带有边框半径的白色矩形来覆盖选区,但这似乎非常低效且不太可能......所以......)

总结一下,他们必须使用Canvas属性和大量代码来"衬托"交互式选择过程.编辑器中出现了许多不同类型的突出显示,例如"同一个词突出显示","选择突出显示","聚焦突出显示"等等......为了使所有这些有效发生,我找不到更好的选择比帆布.

发布此内容不要生我的气.但我不想把我4小时的研究视为浪费.至少我得到了一个观察,就是这样.

更新:

虽然我认为在末尾使用带有边框半径的白色矩形来覆盖选区,但这是一种相当低效且不必要的方式.微软并不这么认为.

他们使用弯曲的边缘矩形来掩盖高光的末端以产生这种效果.他们使用绝对定位的圆边<div>s来突出显示效果.最后<div>,它们覆盖了圆角矩形的图像.

对他们的称赞,他们做得很好.

Answer 2

不完美,但它的工作:

http://jsfiddle.net/coma/9p2CT/

删除真正的选择

::selection {
   background-color: transparent;
}

添加一些样式

span.highlight {
    background: #ADD6FF;
}

span.begin {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span.end {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

pre.merge-end > span:last-child {
    border-bottom-right-radius: 0;
}

pre.merge-end + pre > span:last-child {
    border-top-right-radius: 0;
}

pre.merge-begin > span:first-child {
    border-bottom-left-radius: 0;
}

pre.merge-begin + pre > span:first-child {
    border-top-left-radius: 0;
}

包裹节点元素中的每个字符

var format = function () {

    var before = -1;
    var html = $.trim(editor.text())
    .split("\n")
    .reverse()
    .map(function (line) {

        var a = line.length === before ? 'merge-end' : '';
        before = line.length;

        return '<pre class="' + a + '"><span>' + line.split('').join('</span><span>') + '</span></pre>';
    })
    .reverse()
    .join('');

    editor.html(html);
};

获取所选节点并突出显示它们,照顾他们的父母

var getSelectedNodes = function () {

    var i;
    var nodes = [];
    var selection = rangy.getSelection();

    for (i = 0; i < selection.rangeCount; ++i) {

        selection
        .getRangeAt(i)
        .getNodes()
        .forEach(function (node) {

            if ($(node).is('span')) {

                nodes.push(node);
            }
        });
    }

    return nodes;
};

var highlight = function (nodes, beforeNode) {

    var currentNode = $(nodes.shift()).addClass('highlight');
    var currentParent = currentNode.parent();

    if (beforeNode) {

        var beforeParent = beforeNode.parent();

        if (currentParent.get(0) !== beforeParent.get(0)) {

            currentNode.addClass('begin');
            beforeNode.addClass('end');
            beforeParent.addClass('merge-begin');
        }

    } else {

        currentNode.addClass('begin');
    }

    if (nodes.length) {

        highlight(nodes, currentNode);

    } else {

        currentNode.addClass('end');
    }
};

format();

$(document).on('mouseup', function () {

    $('.highlight').removeClass('highlight begin end');
    highlight(getSelectedNodes());
});

感谢Tim Down for Rangy!