2016-07-15 17 views
1

私はx軸に沿って回転させる2Dキャンバスを持っています。私は後でz軸に沿ってオブジェクトの動きをアニメートしたいと思っています。WPFでx軸に沿ってキャンバスを回転

CSSの場合、x軸に沿って回転するのは簡単です: transform: rotateX(30deg);です。これはz軸上の並進です。

Hereは、XAMLキャンバスをどのように回転させるかのデモンストレーションです。

XAML/WPFでどのように同じ効果を達成できますか?私は、Viewport3DViewport2DVisual3Dで開始し、3D変換を適用しようとしました。しかし、キャンバスは一度置かれてもレンダリングされません。材料の照明やジオメトリを調整する必要があるかどうかはわかりません。私が行くべき最善のアプローチは何ですか?この作業を簡略化するために使用できるツールはありますか?

How to rotate 2D UIElement around a 3D axis (Y)?How to rotate 2D UIElement around a 3D axis (Y)?のコードを使用しようとしました。キャンバスで作業するコードを取得できないようです。

EDIT:

<Viewport2DVisual3D> 
    <Viewport2DVisual3D.Geometry> 
    <MeshGeometry3D TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0" Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0" /> 
    </Viewport2DVisual3D.Geometry> 
    <Viewport2DVisual3D.Transform> 
    <RotateTransform3D> 
    <RotateTransform3D.Rotation> 
     <AxisAngleRotation3D Angle="180" /> 
    </RotateTransform3D.Rotation> 
    </RotateTransform3D> 
    </Viewport2DVisual3D.Transform> 
    <Viewport2DVisual3D.Material> 
    <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White" /> 
    </Viewport2DVisual3D.Material> 
    <Viewport2DVisual3D.Visual> 
    <Border BorderBrush="Transparent" BorderThickness="1"> 
     <Canvas> 
     <!-- ... --> 
     </Canvas> 
    </Border> 
    </Viewport2DVisual3D.Visual> 
</Viewport2DVisual3D> 

キャンバスをレンダリングしない:私は出発点のためのベースとしてhttp://www.codeproject.com/Articles/34391/Rotating-WPF-Content-in-D-Space(セクション "ContentControl3Dの内部")でコードを使用してみました

。私は提供した他のリンクから他のラッパーも使用しようとしましたが、ビジュアルがレンダリングされることはありませんでした。

+2

どのような効果を達成しようとしていますか(サンプル写真)?これは 'RenderTransform'を使って簡単に行うことができるように思えます。 –

+1

また、いくつかのコードを表示してください – lokusking

+0

@ManfredRadlwimmer私はそれを回転させる方法のデモを追加しました。https://jsfiddle.net/33t0ov24/ – Glasspopsicle

答えて

1

From this example page、カメラといくつかの照明(照明オプション)を追加:回転角度180は本当に大きいです

<Viewport3D> 
    <Viewport3D.Camera> 
     <PerspectiveCamera Position="0, 0, 4"/> 
    </Viewport3D.Camera> 

    <ModelVisual3D> 
     <ModelVisual3D.Content> 
      <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"></DirectionalLight> 
     </ModelVisual3D.Content> 
    </ModelVisual3D> 

    <Viewport2DVisual3D> 
    ... 
    </Viewport2DVisual3D> 

を、私は後方のすべての方法の周りにあなたの境界線を反転さだと思います。

+1

照明はオプションです。しかし、Axisは重要だと思われます。 lokusking

+1

はい180度の角度も非常に大きく、90以上の角度で表示されます。 – leetibbett

関連する問題