Flex Image Repeating Canvas Container

As per HTML designer, there is no need to put the whole strip of image which is linear, similar from top – bottom or left – right. The trick HTML designer uses is, he takes a 1px of image that strip and set that image as a background for a table(or row or cell) and set it to repeat.
When it comes to Flex, if we want to put a background image which has the similar linear from its directions. Then we can set the whole strip of image as background for containers.which makes a heavy embedding of image,. So i thought to create a similar kind of container which provides to set a repeating background image and should allow to repeat the image in both horizontal and vertical directions.

So here i come up with a solution, i created a custom Container which extends Canvas container. It accepts the Embedded image (1Px) class reference as well as repeat direction. The custom container works on the Graphics API using beginBitMapFill methods.
So check it out and drop a comment.

here is how to use it steps:
First embed the image(1 px) in your application and create ImageRepeatCanvas and assign the properties;


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:flexscript="com.*">
<mx:Script>
	<![CDATA[
		[Bindable]
		[Embed(source='com/bg.png')]
		private var img:Class;
	]]>
</mx:Script>
<flexscript:ImageRepeatCanvas repeatDirection="horizantal"
 height="150" repeatImage="{img}" width="587" x="31.5" y="49">
	<mx:Button label="Button1" x="10" y="86"/>
	<mx:Button label="Button1" x="257.5" y="86"/>
	<mx:Button label="Button1" x="170" y="86"/>
	<mx:Button label="Button1" x="90" y="86"/>
</flexscript:ImageRepeatCanvas>
</mx:Application>

Next,….

create a directory name as “com” into your directory and put this container class into that directory;

(The class is well documented, you are free to alter, modify etc :) )


/*
	The ImageRepeatCanvas provides a container in which
	embeded images can be repeated
	as designers do in html tables.
*/

package com
{
	import flash.display.Bitmap;
	import flash.display.Graphics;
	import mx.containers.Canvas;

	/**
	 *  The ImageRepeatCanvas container gives a way of creating
	 * one image that repeat
	 *  across either directions.
	 *
	 *  @mxml
	 *
	 *
<pre>
	 *  <namespace:ImageRepeatCanvas
	 *       repeatImage="{EmbededImage Class Reference}"
	 *       repeatDirection="horizantal|horizantal"
	 *    />
	 *</pre>
*/

	public class ImageRepeatCanvas extends Canvas
	{
		//-------------------------------------------------------------
	    //  Variables
	    //-------------------------------------------------------------
		private var bgImg:Bitmap = new Bitmap();
		private var direction:String;
		public var repeatImage:Class;

		//--------------------------------------------------------------
	    //  Constants
	    //--------------------------------------------------------------
		public static var REPEAT_HORIZANAL:String = "horizantal";
		public static var REPEAT_VERTICAL:String = "vertical";

	    //---------------------------------------------------------------
	    //  Constructor
	    //---------------------------------------------------------------
		public function ImageRepeatCanvas()
		{
			super();

		}

		/**
	     *  A setter method to set the direction for repeation of image
	     */
		[Inspectable(category="General", enumeration="horizantal,vertical", defaultValue="horizantal")]
		public function set repeatDirection(val:String):void{
			direction = val;
		}

		/**
	     *  @private
	     */
		override protected function updateDisplayList(w:Number, h:Number):void{
			super.updateDisplayList(w,h);
			bgImg.bitmapData = new repeatImage().bitmapData;
			if(bgImg){
				switch(direction){
					case ImageRepeatCanvas.REPEAT_HORIZANAL:
									h = bgImg.height;
									break;
					case ImageRepeatCanvas.REPEAT_VERTICAL:
									w = bgImg.width;
									break;
				}
				var Grpx:Graphics = graphics;
				Grpx.clear();

				Grpx.beginBitmapFill(new repeatImage().bitmapData);
				drawRoundRect(0,0,w,h);
				Grpx.endFill();
			}
		}
	}
}

Waiting for your comments :)

About this entry

You’re currently reading “Flex Image Repeating Canvas Container,” an entry on Flex Script

Published:
July 24, 2008 / 7:07 am
Category:
Components, Flex
Tags:
, , , ,