[WPF] Crée une grille isometrique

**prog+** · 03/09/2011, 15h35

Bonjour à tous !

Depuis plusieurs jours je cherche comment crée une grille isométrique. Mes recherches m'ont mené à la conclusion que je dois utiliser soit GDI+ soit XNA ou bien encore WPF (XAML).

Dans mon cas j'ai choisi d'utiliser WPF car je n'ai pas besoin d'installer quoi que ce soit pour l'utiliser. Après avoir cherché sur le site de MSDN j'ai trouvé comment dessiner le polygone seulement je n'ai pas trouvé comment recouvrir toute la carte ...

Étant débutant avec WPF je suppose qu'il faut créer une boucle For dans le code c# mais la encore comment ?

Lorsque je clique sur une case celle-ci doit normalement changer de couleur, mais je me pose une question ... est-ce comme avec les winforms (dès que l'on clique sur un ITEM il nous génère une classe avec le code à exécuter) ou alors cela ce passe t'il autrement ?

Merci d'avance de vos réponses

**Jerede** · 03/09/2011, 19h38

Admettons que tu dessines dans une PictureBox avec GDI+, tu traces ta grille isométrique et dans l'évenement OnClick de la PictureBox tu récupères la cellule grâce aux cordonnées et tu redessines d'une autre couleur.

Jamais utilisé WPF, mais je suppose que c'est la même chose.

Envoyé par prog+

Bonjour à tous !
est-ce comme avec les winforms (dès que l'on clique sur un ITEM il nous génère une classe avec le code à exécuter) ou alors cela ce passe t'il autrement ?

Non, un contrôle par cellule de ta grille, l'horreur

**prog+** · 04/09/2011, 10h44

Hum ... Tout d'abord merci de m'avoir répondue

Ensuite je penses que pour dessiner ma grille je vais me contenter de l'importer directement de la manière suivante :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<Window x:Class="WpfApplication5.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" 
    Loaded="Window_Loaded">

Puis pour la gestion :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    BitmapImage bmp = new BitmapImage();
    bmp.BeginInit();
    bmp.UriSource = new Uri(@"Resources\map.bmp",UriKind.Relative);
    bmp.EndInit();
    MonImage.Source = bmp;
}

Mais bon ... après comment faire pour "sectioner" l'image en cellule ...
Merci d'avance

**istace.emmanuel** · 04/09/2011, 16h56

Je pense que le plus simple est d'utiliser les transformations fournies par WPF avec les formules de mise en perspective isométrique que tu peu trouver sur wikipedia par exemple : http://fr.wikipedia.org/wiki/Perspec...om%C3%A9trique

Et je rajouterais que je pense que le plus simple est de créer un contrôle qui sera une des cellules de ta map sur lequel tu rajoute une attached property qui est bindé sur le tile a affiché. Chaque "tilecontrol" ayant la responsabilité de sa mise en 3d iso. Et ensuite un autre control qui servira de container pour les tilecontrol.

Pour faire cela proprement regarde du coté des patterns mvvm et des framework associé. Bien que n'étant pas spécialement conçus pour les jeuxvideo, ce sera un vrai plus coté maintien de ton application et découplage si tu utilise WPF.

**prog+** · 04/09/2011, 17h38

Merci de votre réponse

je pense en fait que je vais tracer des lignes puis appliquer la fonction de rotation =)

**MABROUKI** · 09/09/2011, 05h44

Bonjour prog+.
Isometrique as-tu dit ? et en 3D .Facile avec OrthographicCamera car :
- un Cube vu en perpespective orthographique (cavaliere en francais pour les architectes ) par la camera du meme nom dirigee du sommet A oppose à l'origine vers l'origine O des axes ressemble etrangement au "Losange resultant de la projection du volume du cube sur un plan diagonal " comme en dit wikipedia.

Beaute de la perpespective orthographique elle conserve les dimensions sans distorsions.
l'exemple de code suivant utilise un cube .Sur les 3 faces ( Front,Right et Topt) a ete dessine a un controle Canvas quadrille par code avec -x- rectangles avec un Fill Transparent pour voir le background uniforme du canvas.
Le Canvas avec ses rectangles(UIElement dotes d'evenements et de l'input) sont places dans un Viewport2DVisual3D -reserve aux controles 2D- qui lui meme est place dans le Viewport3D .
Ensuite des HitTest sont effectues sur le canvas et les triangles.

2 sliders sont ajoutes pour regler la position du cube de maniere a voir "isometriquement le cube comme un losange dans le plan de projection de la scene ou View Frustum" dans la position 1 du slider.
code xaml du winform:

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
 
<Window x:Class="WPFViewport2DVisual3DTest.WinCamOrthoIsometrique"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WPFViewport2DVisual3DTest"
    Title="2D Elements Canvas on 3D Surfaces-OrthographicCamera" Height="300" Width="300">
    <Grid Margin="5">
        <Grid.Resources>
            <!-- LookDirection pointe du Sommet 60 60 60 oppose à l'origine des axes-->
            <!-- vers l'origine  "-1 -1 -1" -->
            <!--ce qui donne le plan de coupe isometrique du cube--> 
            <OrthographicCamera 
               x:Key="orthocamera"
               Position="60 60 60"
               LookDirection="-1 -1 -1"
               UpDirection="0 1 0"/>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto" MinHeight="32"></RowDefinition>
            <RowDefinition Height="Auto" MinHeight="32"></RowDefinition>
        </Grid.RowDefinitions>
 
        <!-- Create a slider used to control rotation -->
        <Slider
            Grid.Row="1"
            Name="slider" 
            Margin="5" 
            Minimum="0" Maximum="360"
            Orientation="Horizontal"/>
        <!-- Create a slider used to control scale -->
        <Slider
            Grid.Row="2"
            Name="sliderScale" 
            Margin="5,10,5,0" 
            Minimum="-10" Maximum="10"
            Orientation="Horizontal" 
            Height="22" 
            VerticalAlignment="Top" />
        <Viewport3D 
            Camera="{Binding
            Source={StaticResource orthocamera}}">
            <ContainerUIElement3D>
                <ModelUIElement3D>
                    <Model3DGroup>
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D
                                Positions=
                                "-1 1 1, 1 1 1, 1 1 -1,-1 1 -1,
                                -1 -1 1,-1 -1 -1, 1 -1 -1, 1 -1 1,
                                -1 1 1,-1 -1 1, 1 -1 1, 1 1 1,
                                1 1 1, 1 -1 1, 1 -1 -1, 1 1 -1,
                                1 1 -1, 1 -1 -1,-1 -1 -1,-1 1 -1,
                                -1 1 -1,-1 -1 -1,-1 -1 1,-1 1 1"
                                TriangleIndices=
                                "0 1 2, 2 3 0,
                                4 5 6, 6 7 4,
                                8 9 10,10 11 8,
                                12 13 14,14 15 12,
                                16 17 18,18 19 16,
                                20 21 22,22 23 20"
                                TextureCoordinates=
                                "0 0,1 0,1 1,0 1,
                                0 0,1 0,1 1,0 1,
                                0 0,1 0,1 1,0 1,
                                0 0,1 0,1 1,0 1,
                                0 0,1 0,1 1,0 1,
                                0 0,1 0,1 1,0 1"/>
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <LinearGradientBrush 
                                            StartPoint="0,0" 
                                            EndPoint="0,1">
                                            <GradientStop 
                                                Color="Yellow" 
                                                Offset="0.2"/>
                                            <GradientStop 
                                                Color="Red" 
                                                Offset="1"/>
                                        </LinearGradientBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.Transform>
                                <Transform3DGroup>
                                    <RotateTransform3D>
                                        <RotateTransform3D.Rotation>
                                            <AxisAngleRotation3D
                                                Angle="{Binding ElementName=slider, Path=Value}"
                                                Axis="0 1 0"/>
                                        </RotateTransform3D.Rotation>
                                    </RotateTransform3D>
                                    <ScaleTransform3D
                                        ScaleX="{Binding ElementName=sliderScale, Path=Value}"
                                        ScaleY="{Binding ElementName=sliderScale, Path=Value}"
                                        ScaleZ="{Binding ElementName=sliderScale, Path=Value}"
                                        CenterX="0"
                                        CenterY="0"
                                        CenterZ="0">
                                    </ScaleTransform3D>
                                </Transform3DGroup>
                            </GeometryModel3D.Transform>
                        </GeometryModel3D>
                        <!-- Set light source: -->
                        <DirectionalLight 
                            Color="White"
                            Direction="-1,-1.2,-1.4"/>
                    </Model3DGroup>
                </ModelUIElement3D>
            </ContainerUIElement3D>
        </Viewport3D>
 
        <Viewport3D 
            Camera="{Binding Source={StaticResource orthocamera}}">
            <!-- Set light source: -->
            <ContainerUIElement3D>
                <ModelUIElement3D>
                    <DirectionalLight 
                        Color="White"
                        Direction="-1,-1.2,-1.4"/>
                </ModelUIElement3D>
            </ContainerUIElement3D>
            <!-- Add 2D element canvas on front surface: -->
            <Viewport2DVisual3D>
                <Viewport2DVisual3D.Geometry>
                    <MeshGeometry3D
                        Positions="-1 1 1,-1 -1 1,1 -1 1,1 1 1"
                        TriangleIndices="0,1,2 2,3,0"
                        TextureCoordinates="0 0,0 1,1 1,1 0"/>
                </Viewport2DVisual3D.Geometry>
               <!--ne pas oublier de mettre  IsVisualHostMaterial à true-->
                <Viewport2DVisual3D.Material>
                    <DiffuseMaterial
                        Viewport2DVisual3D.IsVisualHostMaterial="true" 
                        Brush="White" />
                </Viewport2DVisual3D.Material>
                <!-- Add 2D elements: -->
                <Border 
                    BorderBrush="LightBlue"
                    BorderThickness="1">
                    <StackPanel 
                        Margin="10">
                       <Canvas  
                            Name="frontCanvas"
                            Background="WhiteSmoke"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            MouseDown="frontCanvas_MouseDown">
                        </Canvas>
                    </StackPanel>
                </Border>
                <!-- Set rotation transform and scale transform: -->
                <Viewport2DVisual3D.Transform>
                    <Transform3DGroup>
                        <RotateTransform3D>
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D
                                Angle="{Binding ElementName=slider, Path=Value}"
                                Axis="0 1 0"/>
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                        <ScaleTransform3D
                                ScaleX="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleY="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleZ="{Binding ElementName=sliderScale, Path=Value}"
                                CenterX="0"
                                CenterY="0"
                                CenterZ="0">
                        </ScaleTransform3D>
                    </Transform3DGroup>
                </Viewport2DVisual3D.Transform>
            </Viewport2DVisual3D>
            <!-- Add 2D elements canvas on right surface: -->
            <Viewport2DVisual3D>
                <Viewport2DVisual3D.Geometry>
                    <MeshGeometry3D
                        Positions="1 1 1,1 -1 1,1 -1 -1,1 1 -1"
                        TriangleIndices="0,1,2 2,3,0"
                        TextureCoordinates="0 0,0 1,1 1,1 0"/>
                </Viewport2DVisual3D.Geometry>
                <Viewport2DVisual3D.Material>
                    <DiffuseMaterial
                        Viewport2DVisual3D.IsVisualHostMaterial="true" 
                        Brush="White" />
                </Viewport2DVisual3D.Material>
                <!-- Add 2D elements: -->
                <Border 
                    BorderBrush="LightBlue"
                    BorderThickness="1">
                    <StackPanel 
                        Margin="10">
                        <Canvas  
                            Name="rightCanvas"
                            Background="WhiteSmoke"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            MouseDown="rightCanvas_MouseDown">
                        </Canvas>
                    </StackPanel>
                </Border>
                <!-- Set rotation transform and scale transform : -->
                <Viewport2DVisual3D.Transform>
                    <Transform3DGroup>
                        <RotateTransform3D>
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D
                                Angle="{Binding ElementName=slider, Path=Value}"
                                Axis="0 1 0"/>
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                        <ScaleTransform3D
                                ScaleX="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleY="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleZ="{Binding ElementName=sliderScale, Path=Value}"
                                CenterX="0"
                                CenterY="0"
                                CenterZ="0">
                        </ScaleTransform3D>
                    </Transform3DGroup>
                </Viewport2DVisual3D.Transform>
            </Viewport2DVisual3D>
 
            <!-- Add 2D elements canvas on top surface: -->
            <Viewport2DVisual3D>
                <Viewport2DVisual3D.Geometry>
                    <MeshGeometry3D
                        Positions="-1 1 1,1 1 1,1 1 -1,-1 1 -1"
                        TriangleIndices="0,1,2 2,3,0"
                        TextureCoordinates="0 0,0 1,1 1,1 0"/>
                </Viewport2DVisual3D.Geometry>
                <Viewport2DVisual3D.Material>
                    <DiffuseMaterial
                        Viewport2DVisual3D.IsVisualHostMaterial="true" 
                        Brush="White" />
                </Viewport2DVisual3D.Material>
                <!-- Add 2D elements: -->
                <Border 
                    BorderBrush="LightBlue"
                    BorderThickness="1">
                    <StackPanel 
                        Margin="10">
                        <Canvas  
                            Name="topCanvas"
                            Background="WhiteSmoke"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            MouseDown="topCanvas_MouseDown">
                        </Canvas>
                    </StackPanel>
                </Border>
                <!-- Set rotation transform and scale transform: -->
                <Viewport2DVisual3D.Transform>
                    <Transform3DGroup>
                        <RotateTransform3D>
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D
                                    Angle="{Binding ElementName=slider, Path=Value}"
                                    Axis="0 1 0"/>
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                        <ScaleTransform3D
                                ScaleX="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleY="{Binding ElementName=sliderScale, Path=Value}"
                                ScaleZ="{Binding ElementName=sliderScale, Path=Value}"
                                CenterX="0"
                                CenterY="0"
                                CenterZ="0">
                        </ScaleTransform3D>
                    </Transform3DGroup>
                </Viewport2DVisual3D.Transform>
            </Viewport2DVisual3D>
        </Viewport3D>
    </Grid>
</Window>

code behind du winform:

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Media3D;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WPFViewport2DVisual3DTest
{
    /// <summary>
    /// Logique d'interaction pour Window3.xaml
    /// </summary>
    public partial class WinCamOrthoIsometrique : Window
    {
        //cote d'un rectangle
        private double sideSquare = 40.0;
        private Rectangle myRect;
        //list eventuelle des rectangles pour acces
        private List<Rectangle> lstRects = new List<Rectangle>();
        public WinCamOrthoIsometrique()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            double largeur = this.topCanvas.ActualWidth;
            double hauteur = this.topCanvas.ActualHeight;
            //estimation du nombre de rectangles 
            int nbRectangle = (int)(largeur / sideSquare);
            Canvas objCanvas;
 
            //draw topCanvas
             objCanvas = this.topCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur, objCanvas);
 
            //draw frontCanvas
             objCanvas = this.frontCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur, objCanvas);
 
            //draw rightCanvas
            objCanvas = this.frontCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur,objCanvas);
        }
        private void drawRectangles(int nbRectangle, double largeur, double hauteur,Canvas objCanvas)
        {
            double x = 0.0;
            double y = 0.0;
            for (int j = 1; j <= nbRectangle; j++)
            {
 
                for (int i = 1; i <= nbRectangle; i++)
                {
                    this.myRect = new Rectangle();
                    this.myRect.Width = sideSquare;
                    this.myRect.Height = sideSquare;
                    this.myRect.Stroke = Brushes.Blue;
                    this.myRect.StrokeThickness = 0.5;
                    this.myRect.Fill = Brushes.Transparent;
                    Canvas.SetLeft(this.myRect, x);
                    Canvas.SetTop(this.myRect, y);
                    objCanvas.Children.Add(this.myRect);
 
                    lstRects.Add(this.myRect);
 
                    x = x + sideSquare;
 
                }
                x = 0.0;
                y = y + sideSquare;
 
            }
 
        }
        //'mise a jour suite à rediimensionnent fenetre 
        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            double largeur = sizeInfo.NewSize.Width;
            double hauteur = sizeInfo.NewSize.Height;
            int nbRectangle = (int)(largeur / sideSquare);
            Canvas objCanvas;
 
            //draw topCanvas
             objCanvas = this.topCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur, objCanvas);
 
            //draw frontCanvas
             objCanvas = this.frontCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur, objCanvas);
 
            //draw rightCanvas
            objCanvas = this.rightCanvas;
            this.drawRectangles(nbRectangle, largeur, hauteur, objCanvas);
 
            base.OnRenderSizeChanged(sizeInfo);
        }
        //HitTest des rectangles UI enfants  du  topCanvas
        private void topCanvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Point hitPt = e.GetPosition(sender as Canvas);
            MessageBox.Show(
           "I am a 2D rectangle on the top surface of topCanvas." + hitPt.X.ToString() + "," + hitPt.Y.ToString());
 
            // Perform the hit test against a given portion of the visual object tree.
            HitTestResult result = VisualTreeHelper.HitTest(this.topCanvas, hitPt);
 
            if (result != null)
            {
                // Perform action on hit visual object.
               if (result.VisualHit.GetType() == typeof(Rectangle)) 
                   {
                       Rectangle myrect = (Rectangle)result.VisualHit;
                       myrect.Fill = Brushes.WhiteSmoke;
                   }
            }
 
        }
        //HitTest de l'element UI rightCanvas 
        private void rightCanvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show(
            "I am a 2D rectangle on the right  surface of rightCanvas .");
        }
        //HitTest de l'element UI frontCanvas
        private void frontCanvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show(
            "I am a 2D rectangle on the front surface of rightCanvas.");
        }
 
    }
}

Bon code..................

[WPF] Crée une grille isometrique

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager