Accueil > Uncategorized > Techdays 2013, coding4fun : au delà du z-order…

Techdays 2013, coding4fun : au delà du z-order…

Bonjour à tous,

Comme chaque année, ce fut un grand plaisir de participer à la session coding4fun avec mes anciens collègues de Microsoft. Cette fois-ci je vous ai proposé une solution pour résoudre une problématique de z-order complexe. Quelle que soit la technologie d’affichage, traditionnellement le z-order (ou z-index) est résolu par l’ordre de dessin. Il arrive parfois que l’on veuille afficher différents éléments avec une logique plus complexe.

image

ex: un diaphragme d’appareil photo.

J’ai donc mis en place un manager qui permet de définir des associations de superposition multiples entre contrôles, y compris si ces associations finissent par être circulaires. ( A > B > C > A).

 

image

Pour ce faire, j’ai mis en place un système de recalcul dynamique du clipping des éléments afin de respecter mes règles de superposition. Chaque élément est clipé par l’ensemble de ceux qui le superposent. Afin de calculer la géométrie de clipping, je commence par translater l’ensemble des géométries des éléments dans un repère commun afin de calculer leurs intersections potentielles. La géométrie résultante est retranslaté dans le repère du controle et lui est appliquée en tant que zone de clip.

 

public class ZOrderManager
{
    public ZOrderManager()
    {
        shapes = new Dictionary<Shape, List<Shape>>();
    }

    private Dictionary<Shape, List<Shape>> shapes;

    public void IsOver(Shape foreground, Shape background)
    {
        List<Shape> children = null;
        if (shapes.TryGetValue(background, out children))
            children.Add(foreground);
        else
        {
            children = new List<Shape>();
            children.Add(foreground);
            shapes.Add(background, children);
        }
    }

    public void UpdateClipping(UIElement relativeTo)
    {
        foreach (var element in shapes)
        {
            var geom = GetRelativeGeometry(element.Key, relativeTo);
            var clip =
                element.Value.Select(s => GetRelativeGeometry(s, relativeTo))
                    .Aggregate(geom, (acc, g) =>
                        Geometry.Combine(acc, g, 
                            GeometryCombineMode.Exclude, null));
            var trans = element.Key.TransformToAncestor(relativeTo).Inverse;
            element.Key.Clip =
                Geometry.Combine(clip, Geometry.Empty, 
                    GeometryCombineMode.Union, (Transform) trans);
        }
    }

    private Geometry GetRelativeGeometry(Shape shape, UIElement relativeTo)
    {
        var trans = shape.TransformToAncestor(relativeTo);
        return Geometry.Combine(shape.RenderedGeometry, Geometry.Empty,
            GeometryCombineMode.Union, (Transform) trans);
    }
}

On peut voir ici que chaque controle est clipé permettant d’obtenir un résultat impossible à avoir juste en jouant avec l’ordre de dessin.

image
J’ai également implémenté le pseudo diaphragme en utilisant la même solution.

image
Vous trouverez ici les sources de la solution: http://sdrv.ms/11KQSCX

Qques liens vers les autres démos de la session coding4fun:

Démos de David Catuhe

Démos de David Rousset

Mitsu

Catégories :Uncategorized
  1. khalidbouam
    18/02/2013 à 17:12

    Trop bien codé et très bonne démos pour les techdays.

  2. 30/11/2015 à 17:45

    salut ton blog ne s’affiche pas correctement sous le navigateur Demonecromancy version 38 je pense que c’est un bug qui doit provenir du theme WordPress je vais essayer sous Firefox pour voir http://swaggmansataniste.tumblr.com/post/134267556825/swagg-man-est-il-sataniste

  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :