問題タブ [viewport]

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.

0 投票する
2 に答える
1847 参照

silverlight - SilverLight 3 で 3D 製品モデルを作成できますか?

しばらくの間、ViewPoint を使用して 3D モデルを作成してきましたが、これらのモデルを Silverlight に移行する可能性に興味をそそられています。私はかなり良いasp.netの経験を持っていますが、Silverlightアプリを作成したことはありません. Silverlight 3 ベータ版で 3D モデルを作成するための優れたチュートリアルはありますか?

0 投票する
1 に答える
757 参照

jquery - jQueryダイアログをロードすると、ブラウザのビューポートフォーカスが変更されます

jQuery UIウィンドウをロードしていますが、ページの上部から数スクロール下にスクロールします。ブラウザを開くと、ページの上部に位置がリセットされます。

ダイアログをロードする直前に役立つ場合は、ページにHTML(ダイアログのhtml)を挿入しています。

誰かがこれを止める方法を知っていますか?

編集質問の答えは私の問題が何であるかを推測し、それを解決しました。ハッシュタグを使用してリンクを呼び出していました。

0 投票する
2 に答える
807 参照

language-agnostic - 重心ビューポートでのオブジェクトの移動

私は、いくつかの粒子が互いに相互作用している力ベースの物理シミュレーションをモデル化しています。パーティクルは、静的なビューポートが簡単に追跡できなくなるような方法で移動する可能性があります(パーティクルのグループ全体が画面から右に移動し、ビューポートに空白の背景が表示されると想像してください)。

私の現在の解決策は、xとyの最小/最大を見つけて粒子の「中心」を追跡し、ビューポートの中央をそれに従わせることです。正常に動作します(真の重心を見つける必要はありません)。ビジュアルは次のとおりです。

ビューポート

私の問題は、マウスを使ってパーティクルを手動でドラッグする機能を追加しようとしていることです。私はこれを行うためのエレガントな方法を見つけていません。問題は、ビューポートがパーティクルの中心に従うため、ビューポート座標とシミュレーション座標の間の変換が絶えず変化することです。

パーティクルをマウスで下に移動すると、シミュレーションでパーティクルの位置が固定されます(パーティクルにかかるすべての力が無視されます)。ボタンを押したままマウスを動かすと、シミュレーションでパーティクルを動かしたいと思います。私はこれを達成しました。ただし、ビューポートやその他のパーティクルがまだ動いているため、不快な副作用が発生します。マウスを押して静止しているとき、パーティクルはシミュレーションでは移動していませんが、すべてのパーティクルの中心が変化し、それに応じてビューポートが調整されるため、画面上でパーティクルは移動しています。カーソルが静止しているため、パーティクルはカーソルの下から「移動」します。マウスを少しだけ動かすと、カーソルの新しい位置が根本的に異なるシミュレーション座標を表すため、パーティクルはカーソルの下にテレポートします。

上記の副作用のない、優れた一貫性のあるユーザーエクスペリエンスのための提案はありますか?


私はすでに考えました:

  • マウスが下がっている間にシミュレーションを一時停止する
  • マウスが下がっている間、ビューポートの変更を一時停止します
  • ビューポートの変更に合わせてマウスカーソルを移動する(本当に悪い)

しかし、それらはすべて他の悪い副作用を持っているか、シミュレーションから価値を奪います。

また、この質問は言語やプラットフォームに依存しないと思うので、「ビューポート」、「ビューポート座標」、または「シミュレーション座標」に文字通りの実装固有の意味を付けないでください。それらを一般的なグラフィックの概念として扱います。

0 投票する
2 に答える
6406 参照

javascript - Ext.Button クラスを Box コンポーネントに追加する

ボックスコンポーネントクラスにボタンを追加するのに少し問題があります。私の理解では、box コンポーネントはコンポーネント クラスを拡張するため、アイテムを追加できる構成オプションはありません。したがって、以下のコードは機能しません...

boxcomponent クラスで構成されるこの北部地域にボタンを追加できる回避策はありますか? 正しい方向への助けは大歓迎です。ありがとうございました。

0 投票する
8 に答える
1420 参照

css - URL フラグメントは CSS レイアウトにどのように影響しますか?

次の 3 つの URL を比較してください (それぞれの場合の上部のナビゲーション バーを見てください)。

  1. http://fast.kirkdesigns.co.uk/blog
  2. 上記と同じですが、URL フラグメント #navigation を使用
  3. 上記と同じですが、URL フラグメント #node-2655 を使用

唯一の違いは、末尾の URL フラグメントであることに注意してください。

最初の 2 ページはまったく問題なく表示されます (少なくとも Firefox では)。問題があるのは3つ目です。フラグメント #node-2655 は、上部のナビゲーション バーを画面の上部から押し出します。ページの上部までスクロールすると、ナビゲーション バーが半分にカットされています。これは、ページが最初にロードされたときにナビゲーションバーが最初のビューポートの外に出る原因となる URL フラグメントを使用した場合に発生します。

では、url フラグメントを使用すると、このような css レイアウトにどのように影響するのでしょうか?!

解決策: 以下で提案されているように、navbar を保持していたコンテナー要素のオーバーフロー: hidden を削除すると、問題が修正されました。でも、その理由を理解したいです!

0 投票する
9 に答える
179161 参照

iphone - 回転を適切に処理するiPhoneのビューポートメタを設定するにはどうすればよいですか?

だから私は使ってきました:

HTMLコンテンツをiPhoneでうまく表示するために。ユーザーがデバイスを横向きモードに回転するまではうまく機能します。横向きモードでは、表示は320pxに制限されたままになります。

ユーザーがデバイスの向きを変更したことに応じて変更されるビューポートを指定する簡単な方法はありますか?それとも、それを処理するためにJavascriptに頼らなければなりませんか?

0 投票する
17 に答える
781859 参照

javascript - ブラウザのビューポートの寸法を取得するには?

訪問者に高品質の画像を表示できるようにしたいのですが、ウィンドウのサイズを検出する方法はありますか?

それとも、JavaScript を使用したブラウザのビューポート サイズですか? 緑のエリアはこちら:

0 投票する
4 に答える
8319 参照

wpf - 正確な不透明マスク

WPF コントロールの一部を正確な位置で強調表示する不透明マスクを設定する必要があるとします ((50;50) の位置に 50x50 の正方形があるとします)。そのために、2 つの GeometryDrawing オブジェクトを含む DrawingGroup を作成します。コントロールの実際のサイズ全体を表す半透明の四角形が 1 つと、強調表示された領域を表す不透明な四角形が 1 つです。次に、この DrawingGroup から DrawingBrush を作成し、その Stretch プロパティを None に設定し、このブラシをマスクする必要があるコントロールの OpacityMask として設定します。

上記の制御の範囲外に「突き出ている」ものは何もありませんが、これはすべて正常に機能します。しかし、コントロールがその境界の外側に何かを描画すると、外側の点が不透明マスクが適用される開始点になり (ブラシがその側に配置されている場合)、マスク全体がその距離だけシフトし、予期しない動作が発生します。

コントロールの境界からマスクを強制的に適用する方法、または少なくともコントロールの実際の境界 (固着部分を含む) を取得する方法が見つからないように見えるので、それに応じてマスクを調整できます。

どんなアイデアでも大歓迎です!

更新:これは、問題を示す簡単なテスト ケース XAML とスクリーンショットです。

上記の正方形の最後のものには、2 つの入れ子になった Borders と Canvas があります。

外観は次のとおりです。

マスクなし
(出典: ailon.org )

次に、2 番目の境界線に OpacityMask を追加して、正方形を除くすべての部分が半透明になるようにします。

すべてが期待どおりに見えます:

マスクされた
(出典: ailon.org )

次に、境界線の左側に 10 ピクセルを突き出す線をキャンバスに追加します。

マスクは左に 10 ピクセルシフトします。

シフトされたマスク
(出典: ailon.org )

Update2 : 回避策として、境界の外側に途方もなく大きな透明な四角形を追加し、それに応じてマスクを調整しますが、これは本当に厄介な回避策です。

Update3 : 注: 長方形と線を含むキャンバスは、境界の外側に何かがあるオブジェクトの例としてあります。このサンプルのコンテキストでは、ある種のブラック ボックスとして扱う必要があります。一般的な問題を解決するためにプロパティを変更することはできません。これは、はみ出さないように線を移動するのと同じです。

0 投票する
1 に答える
2180 参照

jquery - ビューポートに基づくdivの配置

ブラウザ ウィンドウのビュー ポートに対して div を配置したいと思います。現在、ウィンドウ サイズに基づいて動的に配置されるいくつかの jquery を含むポップアップがありますが、それらは絶対配置されているため、ページの上部に基づいているため、下にスクロールして下のプロジェクトをクリックすると、ページ、ポップアップはビューポートの外のページの上部に配置されます…</p>

特に「Redcat」プロジェクトをクリックすると、ここで確認できます。 http://www.samuelfarfsing.com/test.php

ビューポートの現在の位置に対してこれらの div を配置する方法はありますか?

HTML:

Jクエリ: