Discussion :

[assanba]

Bonjour ,

Je cherche comment faire une image d'une bouteille que je pourrais remplir ou vider par un geste sur celle-ci.
J'ai essayé avec un slider et une image de background (png) mais je n'arrive pas a avoir le slider qui épouse la forme de la bouteille.

Comment feriez-vous pour faire celà ?

Merci
Stéphane

[BenoitM]

Bonjour ,

Je cherche comment faire une image d'une bouteille que je pourrais remplir ou vider par un geste sur celle-ci.
J'ai essayé avec un slider et une image de background (png) mais je n'arrive pas a avoir le slider qui épouse la forme de la bouteille.

Comment feriez-vous pour faire celà ?

Merci
Stéphane

Si tu n'as que peu d'état (exemple 100%,75%,50%,25%,0) je dirai que paint peut-être ton ami et tu fais 5 images que tu affiches en fonction du %

[BenoitM]

Quoique j'ai eu une autre idée.

Tu prend une bouteille de vin, tu la photographies
Tu bois 1/4, tu la photographies
Tu bois un 2ème quart et tu la photographies
Tu bois un 3ème quart et tu essayes de la photographier
Et enfin tu bois le reste de la bouteille et tu demandes à un collègue de la photographier

Le lendemain tu pourras utiliser les photos

[assanba]

Merci, pour ta réponse mais je veux gérer 30 ou 60 positions donc ton idée n'est malheureusement pas possible.

L'idée de manière plus simple est d'avoir une forme et de choisir un niveau de remplissage.
J'avais également pensé à metter un background en gradiant et déplacer celui-ci

Stéphane

[DotNET74]

Hello,

je suppose que tu es en Silverlight et donc en utilisant une image de ta bouteille sous laquelle tu dessines un rectangle tu dois pouvoir t'en sortir avec une transformation sur le rectangle !

A voir

[assanba]

Oui je suis en silverlight, j'aurais du le préciser.
Le problème avec ta solution il me semble c'est que cela m'oblige a avoir une bouteille droite.

C'est pour cela que je parle de forme disons une bouteille de teissert avec le diamètre du dernier tiers légèrement plus fin.

Je suis en train de regarder http://www.wintellect.com/CS/blogs/j...es-part-2.aspx

Je cherche une belle solution qui pourrait servir quelque soit la forme.

Stéphane

[DotNET74]

Ben du moment que le rectangle ne dépasse pas de ta bouteille il ne doit pas y avoir de problème

[Samuel Blanchard]

Le plus souple serait de jouer avec l'opacityMask.

D'abord tu places une image en png au premier plan (avec fond transparent la ou tu veux voir le liquide) representant ta bouteille.

Pour le liquide, on prend juste un rectangle. L'astuce consiste, pour que le rectangle suive les contours de la bouteille, à lui appliquer un OpacityMask representant une image. Seule les des informations sur le canal Alpha seront interprété par la propriété OpacityMask.
Avec un logiciel de dessin tu reprends ta bouteille de départ. Tout ce qui n'est pas bouteille tu le remplaces par une couleur dont l'alpha est à 0 et tout ce qui est la bouteille par un alpha à 1. Tu places l'images obtenues comme source d'un ImageBrush dans ton OpacityMask. ton rectangle a maintenant la forme de ta bouteille !

Info sur OpacityMask :
http://msdn.microsoft.com/en-us/libr...(v=vs.95).aspx

Code XAML :

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

1
2
3
4
5
6
7
8
9
<Grid>
   <!-- le liquide -->
   <Rectangle x:Name="Liquide" Fill="Red" VerticalAlignment="Bottom" Height="0">
      <Rectangle.OpacityMask>
            <ImageBrush ImageSource="MaBouteilledeCocaMask.png">
       </Rectangle.OpacityMask>
   </Rectangle>
   </Image Source="MaBouteilledeCoca.png">
</Grid>

(le code n'est pas testé)

Ensuite il ne reste plus qu'à appliquer ceci comme template d'un slider et de faire les liaisons adéquates

ATTENTION : OpacityMask est un peu gourmand en CPU donc il faut s'en servir a bon escient.

[assanba]

Bonjour Samuel,

Merci pour tes conseils je vais regarder ta solution.
Je venais de finir mais si ce n'est pas encore parfait en passant par un path qui fait le contour intérieur de la bouteille et un gradiant de transparant à couleur de liquide

Code XAML :

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

1
2
3
4
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            			<GradientStop x:Name="bottleGrdStop" Color="Transparent" Offset="1.0"/>
                        <GradientStop x:Name="bottleGrdStart" Color="White" Offset="1.0"/>
            		</LinearGradientBrush>

en passant par la suite par

Code C# :

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

 Touch.FrameReported += new TouchFrameEventHandler(OnFrameReported);

je déplacais le gradiant.
ça marche assez bien mais je vais essayer de tester ta solution.

Stéphane

[Samuel Blanchard]

Salut Stéphane,

Je viens de faire un petit test pour m'amuser.
ça marche bien je trouve
Le seul petit hic pourrait eventuellement venir de la façon dont tu veux que le liquide réagisse.
Ici j'ai modifié le template d'un slider, le comportement reste donc celui d'un slider. à savoir il faut cliquer sur le haut du liquide pour le déplacer.

Finalement j'ai passé le dessin de la fenetre derriere et rendu le liquide transparent. Cela rendait mieux que si la bouteille etait devant avec opacité.
Tu n'es pas obligé non plus de faire un mask si ta première image ne se sert de l'alpha que pour fixer ses contours. On se sert alors de la première image comme mask (je t'ai mis quand même l'image du Mask dans le projet).

[assanba]

Samuel,

Tu viens de me dégouter (mais merci). Je suis nouveau sur silverlight et windows phone mais cela faisait 2 jours que j'étais dessus......
Je suis en train de voir pour mettre une elipse en haut ce qui donne un meilleur effet plus vue 3D.

Je regarde ce que tu as fait en //

Stéphane

[Samuel Blanchard]

à l'utilisation, le Splitter n'est pas forcement très agréable.
Il vaut mieux récupérer le déplacement du doigt et gérer soi même le déplacement du liquide.

[assanba]

Bonjour,

C'est ce que j'allais te dire ta solution est belle techniquement mais en expérience utilisateur elle ne va pas.

Je trouve que le path avec le gradiant que l'on déplace marche mieux.

Stéphane

[Samuel Blanchard]

Salut Stéphane,

Je n'ai pas vu ta solution avec le path mais techniquement il y avait deux choses dans ta question :

- avoir un liquide avec une forme de bouteille.
- gerer le deplacemment du doigt.

La forme du liquide sera plus précise avec l'opacityMask que le path et sera plus rapide à mettre en place si tu as plusieurs bouteille (en gros il te faut juste le png de la bouteille ou au pire un mask).

pour le déplacement du doigt, j'ai pris le plus rapide c'est à dire le splitter ( qui n'est pas toujours très efficace) mais comme tu l'as vu il est très facile de créer un control reprenant un evenement Touch et de l'appliquer à la hauteur du liquide.

à toi de voir