Ajouter

Arrondir individuellement certains coins (corners) sur une Image via l'utilisation d'un « mask » dans Flash Builder

Posté le 21 octobre 2009 à 12:21 | Tags: Beta, Builder, corners, Flash, Flex, Image, mask, rounded

Cet exemple Flex va vous montrer comment arrondir individuellement certains coins (corners) sur une Image dans Flash Builder 4 Beta en attachant à celle-ci une masque (mask) créé à partir d'un Sprite arrondi (rounded Sprite) en utilisant la méthode drawRoundRect().

Mise en avant : drawRoundRect() – Sprite- mask

Code source de l'application Flex :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/21/arrondir-individuellement-certains-coins-corners-sur-une-image-->
<s:Application name="Spark_Panel_controlBar_test"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo"
			   initialize="init()" viewSourceURL="srcview/index.html">
 
	<fx:Script>
		<![CDATA[
 
			import mx.events.ResizeEvent;
 
			private var roundedMask:Sprite;
 
			private function init():void{
				roundedMask = new Sprite();
			}
 
			private function image_resize(evt:ResizeEvent):void {
				var w:Number = evt.currentTarget.width;
				var h:Number = evt.currentTarget.height;
				var cornerRadius:uint = 60;
				roundedMask.graphics.clear();
				roundedMask.graphics.beginFill(0xFF0000);
				roundedMask.graphics.drawRoundRectComplex(0, 0,
					w, h,
					0, cornerRadius,
					cornerRadius, 0);
				roundedMask.graphics.endFill();
				image.mask = roundedMask;
			}
		]]>
	</fx:Script>
 
 
	<mx:Image id="image"
			  source="@Embed('img.jpg')"
			  resize="image_resize(event);"/>
 
 
</s:Application>

Rendu de l'exemple Flash Builder 4 Beta (nécessite Flash Player 10 ou version supérieure) :

 Télécharger les sources complètes de l'exemple Flex Gumbo Beta