Récemment, j'ai travaillé sur un projet utilisant Flex. C'est un projet de retouche photo. J'ai pris un canevas et prendre une image dans ce canevas en utilisant le code canvas.addChild(image)
. Maintenant, je peux déplacer l'image librement en utilisant le code en mouvement. L'image se déplace à l'intérieur de la toile et à l'extérieur de la toile. Je veux déplacer l'image/l'enfant seulement à l'intérieur de la toile et non à l'extérieur. Comment puis-je faire ceci?comment peut déplacer l'enfant seulement à l'intérieur du parent?
Répondre
Il y a deux façons de le faire:
- englobante rectangle
- défilement rectangle (ou masque)
En supposant que votre "code mobile" est quelque chose comme un gestionnaire d'Event.ENTER_FRAME initialisé onClick, vous voulez que l'image ne puisse pas quitter les limites du Canvas parent.
Le premier cas (rectangle de délimitation) vous permettra de faire glisser l'image dans le retangle mais vous serez toujours en mesure de voir l'image entière. C'est ainsi que fonctionnent les machines à découper Image.
Pour créer un rectangle de délimitation, vous devrez écrire une méthode assez détaillée, mais l'idée sous-jacente est simple. Procurez-vous le rectangle de délimitation de la toile, et ne laissez pas les image.x
aller en dessous de 0 et ne laissez pas aller au-delà image.x + image.width
canvas.width
. Même avec la hauteur. Voici un exemple Image Cropper in Flex (et the source). Découvrez comment ils l'ont fait pour plus de détails.
Le deuxième cas (rectangle de défilement) vous permet de créer davantage de conteneurs pan/zoom comme vous voyez sur this Flex Pan/Zoom Map (ici the source). En outre, la grande image dans le Flex Image Cropper sur la droite est un exemple de ce deuxième cas, mais ils n'ont pas le glisser. Cela nécessite que vous manipulez la position de la propriété scrollRect sur le canevas. La propriété scrollRect
est une flash.geom.Rectangle
définissant la "" fenêtre "Canvas". Vous pouvez ensuite modifier/mettre à jour les propriétés verticalScrollPosition
et horizontalScrollPosition
, il est donc en arrière (par rapport au rectangle englobante).
Je pense que si vous définissez clipAndEnableScrolling
à true sur le canevas et que vous faites glisser une image enfant à l'intérieur de celui-ci (et image.includeInLayout = true
), il doit couper l'image pour qu'elle apparaisse uniquement dans le canevas. Mais je suppose que vous voulez le cas 1. Il suffit de rechercher ces propriétés et vous trouverez quelques bons exemples sur google.
Bonne chance, devrait être un projet amusant.
Lance