Discussion :

[CoreDumpedped]

Bonjour,

Dans une fenêtre WPF j'affiche une petit image de 50x50. Image que je déplace en fonction de coordonnées souris.
Comment faire pour optimiser le rendu de cette image? J'arrive à déplacer l'image mais sa lag!
Pour info j'ai essayé plusieurs méthode:
1. J'ai mit mon image dans un canvas et à chaque mouseMove event je fait un Canvas.setLeft(deplacement);
2. Plutôt que de jouer sur la position du canvas je joue avec le margin de l'image.

Ces deux solutions on plus ou moins les même perf en fps.
Connaissez vous une méthode ou une fonction permettant d'amélioré les performances ?
Merci

[jopopmk]

Salut,

à quoi ressemble tes deux codes ?
Développes-tu sur une bécane vraiment peu puissante ?

J'ai fait un essai tout sale avec une Image (la Source est un jpg du DD, en 50x50), en modifiant les Left et Top de son Margin selon la position de la souris dans l'event MouseMove de ma Window. C'est super fluide.

[CoreDumpedped]

Je développe sur un i7 7em génération avec un GTX1080 donc niveau bécane j'ai ce qui faut ^^"
En faite j'utilise mon code en parallèle d'un autre outils qui bouffe le CPU ce qui fait lagger mon appli.Le lag est pas foufou mais mon appli consomme 11% du CPU ce que je trouve énorme pour un truc qui se content de déplacer une petit image

Le code qui peut intéressé:


j'intercepte les event souris et a chaque mouseMove Event j'appel cette méthode (avec les coordonnée de la souris en paramétre)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  private void MoveCircleBeta(Point p)
        {
 
            Point coordonner = new Point(x, y);
            label.Content = "" + p.X + ":" + p.Y;
 
           coordonner.X= (coordonner.X /96)/1.5;
            coordonner.Y =  (coordonner.Y /96)/1.5;
           imageCursor.Visibility = Visibility.Visible;
           Canvas.SetLeft(canvasImage, coordonner.X);
           Canvas.SetTop(canvasImage, coordonner.Y);
        }

dans le xaml:

Code :

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

1
2
3
4
5
6
7
 
      <Canvas x:Name="myCanvas"  Background="Transparent" IsHitTestVisible="False" Focusable="False" IsEnabled="False">
            <Canvas  x:Name="canvasImage" IsHitTestVisible="False">
                <Image x:Name="imageCursor" Height="64" Width="64"  Source="C:\Users\rastier\Pictures\cursor3.png"/>
            </Canvas>
            <Label x:Name="label" Content="Label" Canvas.Left="10" Canvas.Top="10" Height="48" Width="195" Background="#FFEAC61D" FontSize="22" FontWeight="Bold" RenderTransformOrigin="-5.223,0.839"/>
        </Canvas>

[jopopmk]

Avi, effectivement, belle babasse ^^

Perso je connais pas bien WPF (j'en fais parfois quand je peux aider ici, sinon je m'en sers pas).
Je te montre mon code, si ça peut t'aider. Mon XAML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<Window x:Class="test_wpf_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:test_wpf_cs"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600" MouseMove="Window_MouseMove">
    <Grid>
        <Image x:Name="MovingPic" HorizontalAlignment="Left" Width="50" Height="50" Margin="275,175,0,0" VerticalAlignment="Top" Source="C:\tmp\pic50.jpg" />
    </Grid>
</Window>

Le code behind de l'event (aucune modif sur le reste du code généré dans ce fichier) :

Code :

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

1
2
3
4
5
6
private void Window_MouseMove(object sender, MouseEventArgs e) {
	Point pos = e.GetPosition(this);
	Thickness tness = new Thickness(pos.X, pos.Y, 0, 0);
	this.MovingPic.Margin = tness;
	this.Title = pos.X.ToString() + ":" + pos.Y.ToString();
}

Les différences qu'on peut noter :
- j'affiche les coordonnées dans le titre de la Window (inintéressant),
- je bouge directement l'Image, et pas le canvas qui la contient,
- j'empile pas de fonction sur l'event, c'est directement dedans (inintéressant),
- j'ai pas de calcul à faire sur mes positions (?),
- je ne touche pas à la visibilité de mon Image (là c'est peut-être intéressant, sachant que cette fonction est appelée à chaque mouvement de souris, ça pourrait engendrer un effet de clignotement dans certains cas).

[CoreDumpedped]

Je viens de testé de bouger directement l'image plutôt que le canvas et effectivement je passe de 13% du CPU a 1.4%...
J'utilisait le canvas pour d'autre truc à la base,mais je vais voir si je peut m'en passé.
Merci pour le coup de pouce!

[CoreDumpedped]

petit question supplémentaire. Avec la technique du déplacement par tickness que tu m'a donnée, l'espace de coordonnée n'est pas le même que celui des event souris (les coordonnée souris son calculé a partir du top left,ce qui n'est pas le cas du tickness (dont le fonctionnement m'est encore un peu obscure).J'ai l'impression que le tickness calcule son positionnement en fonction du milieux de l’écran. Sait tu comment je pourrai modifier sa?
Ce qui m’éviterait une fonction de transposition degeux du style
if(coté haut gauche) alors ...
if (coté haut droit= alors nanan ect

[jopopmk]

Re,

Je suis vraiment pas expert WPF, du coup je suis pas sûr de comprendre la question.
Le Thickness est juste la struct que j'utilise pour replacer l'image, la position du curseur est obtenue avec GetPosition.
Cette position est relative à un élément de l'interface (dans mon cas la fenêtre principale, cf. le this en param).
Quand je vais tout en haut à gauche de ma fenêtre j'ai les coordonnées {0; 0} et en bas à droite {600; 400} (la taille de ma fenêtre).

[dzediar]

Si tu modifie margin ou thickness cela modifie le layout (le placement relatif de tous les composants autour) => c'est long.

Le mieux est soit de travailler sur Canvas.Left et Top pour ton image, soit de mettre une translatetrasform sur le rendertransform de ton image et jouer sur translatetransform.X et Y.

Note : Canvas.Left et Top sont des propriétés de dépendance qui peuvent être settés pour les éléments qui sont dans le canvas (Canvas.SetLeft(monimage, 33.5) ou un truc comme ça)

[CoreDumpedped]

Justement non. Au début j'utilisait les méthode de Canvas.setLeft mais au final c'est beaucoup plus gourmand en ressources .
mon image est le seule composant dans la fenêtre,peut être es-ce pour cela que jouer avec le margin est plus efficace...

jopopmk, je ne capture pas les coordonnées souris via getPosition mais via un hook un peu particulier,qui me donne la position de la souris en coordonnée pixel écran.J'ai pas le choix de passé par la.
J'ai résolut une partie du problème,mais il me reste à géré le problème du DPI (qui n'est pas tout le temps égal a 100%) qui me crée un delta dans mon déplacement souris ^^

[jopopmk]

Entre mes piètres connaissances en WPF et la spécificité de ton app, je crois que je ne peux plus trop t'aider maintenant

Bonne continuation pour ton projet

[CoreDumpedped]

Je suis sur la bonne piste de tout façon.Merci beaucoup pour ton aide!!

[MABROUKI]

bonjour
Tichness est "chiant" par rapport à e.GetPosition....,car il est fait pour contrôler les marges...

Thichess(left,top, right,bottomt) se réfère aux marges par rapport aux conteneur parent et de plus il faut savoir de quelles marges on parle car il y en 4...

A éviter

GetPosition(UIElement) se refere aux coordonnées du conteneur parent avec l'origine du conteneur à (0,0)...
C'est donc l’équivalent des coordonnées client des WinForms...

De plus ,avec un Canvas il faut mettre sa prop ClipToBounds=True...
Dans ton MouseDown il faut activer Image.CaptureMouse() et dans MouseUp Image.CaptureMouseRelease()

bon code....