[wpf] utilisation de drawingImage

Version imprimable

27/03/2010, 10h00
TERRIBLE

[wpf] utilisation de drawingImage

Bonjour,
dans le cadre de mes débuts en wpf j'essaye d'assimiler le mode d'utilisation de la classe Drawing
pour ce faire j'ai créé une image dans laquelle via drawinggroup je veux faire apparaitre deux cercles à gauche et légérement décalés. Hors je m'apercçois que j'ai un effet de sysmétrie qui apparait dans ma disposition des deux cercles. Le rendu ne semble pas tenir compte des informations "centrer "indiquées Pourquoi ?
J'ai mis le Strech à "None" au niveau de l'image
par avance merci
27/03/2010, 10h40
jmix90

Hello,

Tu peux nous fournir le code que tu utilises ?

Merci

voici le code qui est particulièrement simple. Comme tu pourras le constater le fait de modifier la valeur "Center" d'un des cercles modifie les coordonnées de l'autre.

Code:

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
<Window x:Class="essaiwpf.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="1000" Width="1000">
    <Canvas>
 
        <Image Canvas.Left="100" Canvas.Top="100" Stretch="None" Width="100" Height="100">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="Red"/>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="0,10" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <SolidColorBrush Color="Black"/>
                                    </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="20,20" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingImage.Drawing>
               </DrawingImage>
            </Image.Source>
        </Image>
 
 
 
 
    </Canvas>
</Window>

Salut,

Il est possible de créer un DrawingGroup composé de deux DrawingGroup :

Code:

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
                    <DrawingGroup>
 
                        <DrawingGroup>
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="Red"/>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="0,10" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
 
                        <DrawingGroup>
                            <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <SolidColorBrush Color="Black"/>
                                    </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="20,20" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
 
                    <DrawingGroup>

Peut-être que ça répondra à tes besoins ;)

27/03/2010, 16h36
TERRIBLE

as-tu une explication concernant mon problème de dépendance des deux géométries?

Citation:

Envoyé par TERRIBLE

as-tu une explication concernant mon problème de dépendance des deux géométries?

J'avoue avoir donné une solution en te croyant sur parole. Mais après avoir repris ton code, je n'observe aucun effet de type "dépendance" :aie:

Pour vérifier visuellement, j'ai ajouté un rectangle et chez moi les ellipses sont biens placées :

Code:

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
    <Canvas>
 
        <Image Canvas.Left="100" Canvas.Top="100" Stretch="None" Width="100" Height="100">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <DrawingGroup>
 
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="Gray"/>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,40,40" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
 
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="Red"/>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="0,10" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
 
                            <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <SolidColorBrush Color="Black"/>
                                    </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="20,20" RadiusX="5" RadiusY=" 5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
 
                        </DrawingGroup>
                    </DrawingImage.Drawing>
               </DrawingImage>
            </Image.Source>
        </Image>
 
    </Canvas>

Après j'ai peut-être pas cerné ce que tu voulais dire...

28/03/2010, 11h47
TERRIBLE

Si le déclare mon image avec un Canvas.left = Canvas.Top =0 et mes deux ellipses avec un "Center"= (0,0) je m'attends à avoir les deux points superposés sur l'angle supérieur gauche de ma fenêtre. Ce qui n'est pa le cas. j'ai l'impression que mes points se situent au centre de l'image c'est à dire à (100,100) sachant que j'ai donné un width et un height égaux à 200.
Ma question et donc de connaître la règle de localisation des coordonnées de géométries par rapport à l'image ?

Citation:

Envoyé par TERRIBLE

Ma question et donc de connaître la règle de localisation des coordonnées de géométries par rapport à l'image ?

L'image se construit d'abord par rapport à son propre référentiel (elle-même) et ensuite elle est placée dans le contrôle image... C'est cela la règle...

Dans ton cas, tu fabriques une DrawingImage par rapportà elle-même et elle contient deux ellipses, situées au même endroit et de rayon de 5. Ton image fabriquée est donc une image de taille 5x5 contenant deux cercles.

Tu places ensuite cette image dans le contrôle image en lui disant de ne pas faire de stretch : cette image de 5x5 est donc placée au centre du contrôle image en gardant sa taille, tu as donc un point rouge/noir au centre de l'image, ce que tu constates.

Si tu enlèves la taille de ton contrôle image, il prendra la taille de ta DrawingImage c'est à dire 5x5 et se mettra à la bonne position en haut à gauche.

Sinon tu peux aussi ajouter un rectangle transparent de la taille de l'image que tu veux : 200x200 et tu obtiendras le résultat voulu :
Code:

1 2 3 4 5 6 7 8 9 <GeometryDrawing> <GeometryDrawing.Brush> <SolidColorBrush Color="Transparent" /> </GeometryDrawing.Brush> <GeometryDrawing.Geometry> <RectangleGeometry Rect="0,0,200,200" /> </GeometryDrawing.Geometry> </GeometryDrawing>
En espérant que cela va aller...

28/03/2010, 12h40
TERRIBLE

Information particulièrement claire qui apporte une réponse parfaite à ma question
encore merci
28/03/2010, 13h31
jmix90

Citation:

Envoyé par TERRIBLE

encore merci

No problemo :P