画像の枠以外を拡大する

(サンプル一覧を表示する)

FlashDevelop を使って、画像の枠以外 (中心部分のみ) を拡大するテストをしてみました。

Flash には scale9Grid という画像の枠以外の部分だけを拡大する機能がありますが、ベクター画像にしか対応していないので、ビットマップ画像ではこの機能を使うことができません。

ビットマップ画像で同じ機能を実現するにはどうしたら良いのかと思って Google で検索してみると、 ByteArray.org というサイトの方が scale9Grid に対応したビットマップのサブクラスを作ってくださっていました。

ScaleBitmap : 9-slice bitmap class [ by Didier Brun aka Foxy ] < ByteArray.org

RPL というライセンスで公開されています。

GPL に近いライセンスみたいですね。
サンプルサイトで使う分には問題ないと思いますが、商用利用はまずいかもしれません。


Flash の実行画面
画像の枠以外を拡大する

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

元の画像と、普通に縦横 2 倍に拡大した画像 画像の枠以外を拡大する
枠の中でマウスを動かしてみてください。
普通に拡大処理をすると、枠の緑の部分まで拡大されてしまうところですが、
scale9Grid を使うことにより、中心の顔文字が入っている部分だけが拡大されています。

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
	import org.bytearray.display.ScaleBitmap;
	
	/**
	 * 画像の枠以外を拡大するサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image1:Class;
		
		/**
		 * scale9Grid に対応したビットマップ
		 */
		private var bitmap:ScaleBitmap;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// scale9Grid 用の矩形
			var grid:Rectangle = new Rectangle(20, 20, 31, 31);
			
			// ビットマップ初期化
			bitmap = new ScaleBitmap(Bitmap(new image1).bitmapData);
			bitmap.scale9Grid = grid;
			addChild(bitmap);
			
			// フレーム開始イベント登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		/**
		 * フレーム開始イベント
		 * @param	event
		 */
		private function onEnterFrame(event:Event):void
		{
			// マウスの座標に合わせて拡大
			bitmap.setSize(mouseX, mouseY);
		}
		
	}
	
}		

参照

外部リンク