Premier article d'une série sur le multitouch.
Aujourd'hui nous allons commencer par quelque chose de très simple : faire une petite application consistant en un contrôle utilisateur qui suit un doigt.
Nous utilisons .NET 3.5 sans librairie externe.
Définition de l’application
Voici donc la fenêtre que nous allons créer avec dedans une image que l’on va déplacer avec son doit :
1: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Follow my finger !" Height="700" Width="900">
3: <Canvas x:Name="CanvasDeDeplacement" Height="410" Width="410" Margin="234,26" Grid.RowSpan="2" Background="LightBlue">
4: <Image Source="antoine64x64.jpg" />
5: Canvas>
6: Window>
Un petit peu de doigté
Pour que cette image puisse se déplacer sous notre doigt nous devons avoir à notre connaisance :
- Si l’élément est en cours de déplacement,
- La position de notre doigt sur l’écran pendant le déplacement,
- Quel est le doigt qui effectue le déplacement.
Dans le cas d’une application monotouch avec .NET 3.5 nous pouvons considérer que le doigt est un stylet. Ainsi lorsque l’on pose le doigt nous allons pourvoir l’identifier à l’aide d’un numéro unique : le deviceId du stylet !
Pour obtenir les différentes positions on utilise le système d’événement classique. Ensuite on utilise différents champs privés pour savoir dans quel état on est.
Code final
Le nouveau code de la fenêtre : notez bien que l’on prend en compte des cas n’existant pas pour une souris comme la sortie hors de portée d’un stylet. Ces événements peuvent paraitrent théoriques mais se produident en réalité du fait de limitations dues au matériel.
1: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Follow my finger !" Height="700" Width="900"
3: StylusUp="fingerUp" StylusMove="fingerMove" StylusDown="fingerDown" StylusLeave="fingerUp" StylusOutOfRange="fingerUp">
4: <Canvas x:Name="CanvasDeDeplacement" Height="410" Width="410" Margin="234,26" Grid.RowSpan="2" Background="LightBlue">
5: <Image Source="antoine64x64.jpg" />
6: Canvas>
7: Window>
Ensuite toute la logique se trouve dans le code-behind:
1: public partial class MainWindow : Window
2: {
3: public MainWindow()
4: {
5: InitializeComponent();
6: }
7:
8: private UIElement draggedControl = null;
9: private Point decalage;
10: private int fingerId;
11:
12: private void fingerDown(object sender, StylusEventArgs e)
13: {
14: //On ne déplace pas le canvas !
15: if (e.Source == CanvasDeDeplacement) return;
16:
17: //Quel est l'élement qui a détecté un doigt ?
18: UIElement sendingElement = e.Source as UIElement;
19: if (sendingElement != null && draggedControl == null)
20: {
21: //ou touche t'on l'objet ?
22: decalage = Mouse.GetPosition(sendingElement);
23:
24: //Quel element déplace t-on ?
25: draggedControl = sendingElement;
26:
27: //Quel doigt utilise t'on ?
28: fingerId = e.StylusDevice.Id;
29: }
30: }
31:
32: private void fingerMove(object sender, StylusEventArgs e)
33: {
34: //Déplacement en cours
35: UIElement sendingGrid = e.Source as UIElement;
36: if (//Est-on en train de faire un déplacement ?
37: draggedControl != null
38: //Avec le même doigt ?
39: && fingerId == e.StylusDevice.Id)
40: {
41:
42: Point pointOuEstLeDoigtParRapportAuCanvas = Mouse.GetPosition(CanvasDeDeplacement);
43: Canvas.SetLeft(draggedControl, pointOuEstLeDoigtParRapportAuCanvas.X - decalage.X);
44: Canvas.SetTop(draggedControl, pointOuEstLeDoigtParRapportAuCanvas.Y - decalage.Y);
45: }
46: }
47:
48: private void fingerUp(object sender, StylusEventArgs e)
49: {
50: //Si le doigt du déplacement lache l'objet ou s'en va
51: if (fingerId == e.StylusDevice.Id)
52: {
53: //fin du déplacement
54: draggedControl = null;
55: fingerId = -1;
56: }
57: }
58:
59: }
| < Précédent | Suivant > |
|---|
