0

我正在使用rangy为已使用pdf.js呈现的文本的选择创建突出显示。突出显示的 CSSspan非常简单：

.image-highlight {
    background-color: rgba(152, 210, 146, 0.45);
    border: 1px solid #000000; //added this for debugging.
    cursor: pointer;
}

由于 rangy 中的连续高光依赖于先前的高光，我试图复制span由 rangy 创建的高度和宽度，然后将其放置在另一个根节点中。但是，我注意到新创建的宽度span大于原始的span. 同样令人沮丧的是，Chrome 报告两个spans in的宽度相同px，即使它们明显不同！

在开发人员工具栏中查看时，第一个span（由 rangy 创建）的宽度auto由 Chrome 报告Metrics，而第二个跨度（我创建）的宽度通过$.width.

这是我复制span过来的方式：

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width());

$selectionSpan.get(0).className = $span.get(0).className;

以下是 Chrome 报告的图片，显示两个 s 的宽度相同span：

在此处输入图像描述 在此处输入图像描述

如您所见，112px即使它们明显不同，也会报告宽度。为什么会这样？

4

1 回答 1

0

我想通了。这是由于 pdf.js 应用了 CSS3 比例转换。我希望 Chrome 报告转换后的宽度而不是未转换的宽度，但我想这可能是 Chrome 错误。

我能够通过将以下内容附加到创建我的代码来解决此问题span：

css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
css("-moz-transform", $span.parent("div").css("-moz-transform")).
css("-ms-transform", $span.parent("div").css("-ms-transform")).
css("-o-transform", $span.parent("div").css("-o-transform")).
css("-transform", $span.parent("div").css("-transform")).
css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
css("-transform-origin", $span.parent("div").css("-transform-origin"));

所以完整的代码如下所示：

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width()).
    css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
    css("-moz-transform", $span.parent("div").css("-moz-transform")).
    css("-ms-transform", $span.parent("div").css("-ms-transform")).
    css("-o-transform", $span.parent("div").css("-o-transform")).
    css("-transform", $span.parent("div").css("-transform")).
    css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
    css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
    css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
    css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
    css("-transform-origin", $span.parent("div").css("-transform-origin"));
于 2013-07-23T01:48:01.270 回答