1

この質問で提案されているソリューションを使用しているキャンバスの X 座標と Y 座標を取得したいと考えています。簡単に参照できるように、私が使用している関数を次に示します (小さなデバッグ警告メッセージが含まれています)。

function getCumulativeOffset(obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            alert("obj id = " + obj.tagName + " (" + obj.id + ")");
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

ただし、期待する結果が得られません。今、私の問題を追跡して、getCumulativeOffset 関数が HTML の記事タグを取得しないようにしました。関連する HTML は次のとおりです。

<body>
    <article>
        <canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas>
    </article>

    <div id="temp"></div>
</body>

関連する CSS:

article, aside, figure, footer, header, hgroup, nav, section {
    display:block
}
body {
    font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif;
    padding: 0;
    margin: 0 auto;
    width: 40em;
    line-height: 1.75;
    word-spacing: 0.1em
}
article {
    text-align: center;
}
#pizza {
    display: inline-block
}

何らかの理由で、関数をテストすると、アーティクル タグが予期したキャンバスの offsetParent ではないようです。出力は次のとおりです。

  • obj id = CANVAS (ピザ)
  • bj id = 本体 ()

誰でもこれを説明できますか？

4

1 に答える 1

1

によって参照される要素offsetParentは、最も近い位置にある祖先要素です。何も見つからない場合、要素が返されるいくつかの規則があります ( offsetParentMDN で)。の設定position: relativeは<article>、あなたの場合にうまくいくはずです。

于 2012-12-25T15:45:14.793 に答える