問題タブ [rotatetransform]

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 投票する
1 に答える
127 参照

css - CSS3 変換: 親がrotateYを持つ場合の子の補正

まずはこちらをご覧ください

div#container が "x" 度回転 Y の場合、その<ul>中の and および 要素も同様に回転します。しかし、私はすべての<img>内部をそれぞれ<li>平らに向けたいと思っています。<li>「-x」度だけ Y を回転させても、うまくいきません。

回転した div#container に沿って配置しながら、すべての画像を自分に向けて平らにする方法はありますか? ありがとう。

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

wpf - WPF RotateTransform DataTrigger

DataTriggerを使用してWPFでRotateTransformの角度を設定することは可能ですか?もしそうなら、どのように?

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

wpf - RotateTransformは、画像を回転させるだけでなく、画像をシフトします

さて、左上隅を中心に回転させたいImageオブジェクトがあります。'X'度のRotateTransformを設定します。マイイメージのマージンは(400,400,0,0)に設定されています。これにより、キャンバスの中央に配置されます。

問題は、異なる回転角を適用すると、画像が左右にシフトすることです。投稿を見ると、なぜこれが起こっているのかがわかりました。回転変換は境界の長方形を計算するため、画像を回転すると、境界の長方形が大きくなります。マージンはその境界の長方形に適用され、角度が変化すると実際の画像が下方向および右方向にシフトします。

私が欲しいのは、画像の左上隅が常にキャンバス上で正確に(400,400)にあり、画像がその点を中心に回転することです。

私はいくつかの計算を行い、左右のマージンをシフトすることで動作させることができますが、次の式を使用して、象限1と4(0〜90度)および(270〜360度)でのみ正しい計算を行うことができます。

0〜90度の場合:(マージンのTOP部分を変更する必要があります。必要なマージンは(400,400,0,0)Margin =(400-sin(angle)* Image.Height、400、0、0);

270〜360度の場合:(マージンの上部を変更する必要があります。必要なマージンは(400,400,0,0)です。Margin=(400、400 + sin(angle)* Image.Width、0、0);

RotateTransform.Transform(point)とImage.TranslatPoint(point)を使用して実験しましたが、それらを機能させることができないようです。

誰か私に何か提案はありますか?

いつでも画像の結合長方形が何であるかを理解できれば、その幅/高さと画像の幅/高さの違いを理解し、それを使用してマージンを適切にシフトできると思います。

私は自分の問題を示す小さなアプリをまとめました。実行中、アプリは長方形の左上を配置したい場所に赤い点を表示します。画像の代わりにグリッドを使用するように簡略化しました。画面の左上には、回転角を指定できるテキストボックスがあります。テキストボックスの右側には2つのRepeatButtonがあり、クリックして押したままにすると角度が増減します。角度を変更すると、グリッドの左上隅が赤い点から離れる方向にシフトすることに注意してください。左上隅にピンを置き、コーナーが始まるドットからずれることなくピンを中心に回転させたように動作させたいです。

ご協力いただきありがとうございます。

サンプルアプリのコードは次のとおりです。

xaml:

CodeBehind:

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

opengl - ベクトルを Z 軸に沿った場所に回転させる方法は?

ベクトルを Z 軸に回転させたいのですが、その方向は Z 軸後方です。したがって、ベクトルが (1,1,1) の場合、結果は (0,0,-sqrt(3)) になります。

私の考えは2段階です。最初のステップは、X 軸を中心に私のベクトルを XZ 平面に回転させることです。2 番目のステップは、Y 軸を中心に XZ 平面でベクトルを Z 軸に回転させることです。

これが私のコードです:

ただし、結果 r[4] は私の期待ではありません。そのため、上記のいくつかの場所でいくつかの間違いを犯したと思います。誰か私にそれについてのヒントを教えてもらえますか?

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

c# - RotateTransformとTranslateTransformの組み合わせ

私はThumbクラスを使用して、ユーザーがキャンバス上で画像をドラッグアンドドロップできるようにしています。右ボタンが押されたら、ユーザーが画像を回転できるようにしたいと思います。回転は画像の中心を中心に行われます。私は次のXAMLコードを持っています

そして、このコードの背後にある

画面上で画像をドラッグアンドドロップし、画像を少し回転させるだけで機能します(どの方向にも50度で問題ないようです)。ただし、それ以上に操作すると、画像が画面上を予期せず動き始めます。

変換を別のコントロールに移動しようとしましたが、それらを混同しないようにしていますが、許容できる結果は得られていません。

コードを希望どおりに動作させるにはどうすればよいですか?

更新:これは私の狂気を駆り立てています。代わりにMatrixTransformationを使用するようにコードとXAMLを変更しました

私の考えでは、これは機能するはずです。まず、グラフィックをオフセットに移動するよりも回転させます。期待どおりに動作しません。画像を回転させますが、マウスを動かし続けると不思議なことにスパイラル状に外側に移動します。私が何をしても、どのような順序で変換を実行しても、機能しません。

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

kinect - Kinect による画像操作

画像をズームインおよびズームアウトし、Kinect を介して回転するアプリケーションを作成しようとしています。これまでのところ動作しますが、いずれかまたはケースの場合です。私が望むのは、画像を回転させた場合、ズーム時にその新しい値が保存されるため、X 度回転した画像をズームすることです。今のやり方だと、回転させてからズームしようとすると、画像が最初の段階に戻ってしまいます。

助言がありますか?

ありがとう!

0 投票する
6 に答える
11101 参照

xcode - 進行状況ビューの高さ xcode

Xcodeでプログレスビューバーの高さを変更する方法はありますか?

Xcode 4.3 を使用しており、垂直のプログレス バーが必要です。バーを回転させましたが、高さを変更できず、円として表示されます。

また、進行状況バーを回転させるより効果的な方法も役立ちます。

ありがとう!

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

css - CSS3 変換を使用して DIV を側に向ける

以下に示すように、-90 度回転した側に表示する必要があるメニューがあります。

ここに画像の説明を入力

注: DIV には動的な幅があるため、回転してから を使用して左または上にシフトすることはできませんtop:-XX

CSS3 変換と変換元を使用して多くのことを試しましたが、どの組み合わせも使用できませんでした。

ここで、div のコンテンツをランダムに作成するフィドル ( http://jsfiddle.net/P2UQy/8/ ) を作成しました (動的な幅)。このフィドルには、CSS3 変換を使用した回転の失敗も含まれます。

上の図のように誰でも動作させることができますか? 必要に応じて、コンテナー/ラッパーを自由に追加してください。

0 投票する
3 に答える
6152 参照

javascript - css遷移を使用せずにjQuery animateをcss3プロパティと組み合わせる方法は?

この例では; css3 回転プロパティを使用して jQuery アニメーションを作成しようとしています。このアニメーションは css3transitionと jQueryで管理できますが、jQuery バリエーションに従って角度値を回転させるためcss()に jQuery でこれを行いたいと考えています。animate()

jQuery 1.8.0でcss3プロパティ値でanimateを使用することは可能ですか?

検査する jsFiddle は次のとおりです。

jQuery:

html:

編集: などのベンダー接頭辞が削除されまし-webkit-た。ケビン B に感謝します。

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

windows-phone-7 - WP7 で WriteableBitmap と RotateTransform を使用してテキスト ブロックをレンダリングする

Windows Phone の Silverlight の WriteableBitmap には、本当に厄介なバグがあるようです。次のコードと xaml があります。

xaml は次のとおりです。

下のボタンをクリックすると、複合変換を使用して書き込み可能なビットマップで上のボタンがレンダリングされます。各レンダリングの後、結果として得られるトップ ボタンの画像は前の画像よりも大きくなります。また、書き込み可能なビットマップの PixelWith および PixelHeight プロパティ値は、Image オブジェクトの RenderSize とは大きく異なります。何が起こっているのか誰にも分かりませんか?