問題タブ [getboundingclientrect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css-transforms - 2 つの重なり合う要素の変換元の計算
ボックス (青で表される) をオーバーレイするイメージ (緑で表される) があり、イメージtransform: scale()のサイズは ing になります。これが発生すると、画像のすべてのエッジが同時に変換を完了する必要があります。
これを行うにはtransform-origin、JavaScript を使用して、境界ボックスの上に画像が配置されている場所に基づいて を計算する必要があります。getBoundingClientRect()両方の要素に提供されるすべての座標を知っていると仮定します。
以下の 6 つの例では、変換元のパーセンテージが交差する場所に赤い点を配置しました。
そこにたどり着くための数学がわかりません。答えを見つけるのに最も近いのはこの質問ですが、少しあいまいで、答え自体を完全に理解しているかどうかはわかりません。これについてご支援いただければ幸いです。何か不足している場合は、喜んで詳細をお知らせします。
reactjs - getBoundingClienRect() は、最初は要素の適切な位置を取得しますが、2 回目のレンダリング後に {0,0,0,0} を取得します
現在、Ionic4/stencil アプリ (PWA ツールキット: https://ionicframework.com/pwa/toolkitを使用) を開発しており、コンポーネントの位置を取得する際に問題が発生します。
}
ユーザーがイオン ボタンをクリックすると、位置を取得する画像の ID を指定して getPos() メソッドを呼び出します。
ボタンをクリックすると、すべてが正常に機能し、コンソールに img の適切な位置が表示されます。
しかし、画像をもう一度クリックすると、{0,0,0,0} 座標が得られます...
これについての説明はありますか？
前もって感謝します、