0

pdf.jsを使用してレンダリングされたテキストの選択範囲のハイライトを作成するために rangy を使用しています。ハイライト表示の CSSspanは非常に単純です。

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

rangy の連続するハイライトは前のハイライトに依存しているため、spanrangy によって作成された高さと幅をコピーして、別のルート ノードに配置しようとしています。ただし、新しく作成された の幅がspan元の よりも大きいことに気付きましたspan。また、イライラするのは、明らかに異なるにもかかわらず、 Chrome が の両方spanのに対して同じ幅を報告することです!px

最初のspan(rangy によって作成された) 幅は、開発者ツールバーのauto下に表示されたときに Chrome によって報告されMetricsた幅ですが、2 番目のスパン (私が作成したもの) の幅は を介し​​て明示的に設定され$.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;

そして、幅が両方spanの s で同じであることを報告する Chrome の写真を次に示します。

ここに画像の説明を入力 ここに画像の説明を入力

ご覧のとおり、112px明らかに異なるにもかかわらず、幅が報告されています。なぜこうなった？

4

1 に答える 1

0

私はこれを理解しました。これは、CSS3 スケール変換を適用する pdf.js が原因でした。Chrome は、変換されていない幅ではなく、変換された幅を報告することを期待していますが、それは Chrome のバグである可能性があります。

my を作成するコードに以下を追加することで、これを修正できました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 に答える