トップページ > お絵描き > マウスで四角形や円を描く



概要

マウスで線を描く(プレビュー版 その2)の続きです。
マウスで四角形や円を描けるようにしましょう。


プログラム

描くのは簡単で、前回のコードのmoveToやlineToをdrawCircleやdrawRectに置き換えるだけです。


円を描く

private function onMouseMove(event:MouseEvent):void
{
	// クリックした地点から現在位置までの二点間距離
	var distance:Number = Math.sqrt(Math.pow(mouseX - prev.x, 2) + Math.pow(mouseY - prev.y, 2));
	preview.graphics.clear();
	preview.graphics.lineStyle(1.0, 0x9F9F9F);
	preview.graphics.drawCircle(prev.x, prev.y, distance);
}
 
private function onMouseUp(event:MouseEvent):void
{
	var distance:Number = Math.sqrt(Math.pow(mouseX - prev.x, 2) + Math.pow(mouseY - prev.y, 2));
	preview.graphics.clear();
	preview.graphics.lineStyle(8.0, int.MAX_VALUE * Math.random());
	preview.graphics.drawCircle(prev.x, prev.y, distance);
 
	bd.draw(preview);
 
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
 
円のサイズはクリックした地点から現在地点までの二点間距離になります。
確定した四角形の色はランダムにしています。

四角形を描く

private function onMouseMove(event:MouseEvent):void
{
	preview.graphics.clear();
	preview.graphics.lineStyle(1.0, 0x9F9F9F);
	preview.graphics.drawRect(prev.x, prev.y, mouseX - prev.x, mouseY - prev.y);
}
 
private function onMouseUp(event:MouseEvent):void
{
	preview.graphics.clear();
	preview.graphics.lineStyle(8.0, int.MAX_VALUE * Math.random());
	preview.graphics.drawRect(prev.x, prev.y, mouseX - prev.x, mouseY - prev.y);
 
	bd.draw(preview);
 
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
 
四角形の幅は現在地点x - クリックした地点x、高さは現在地点y - クリックした地点yになります。


検証用コード

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
 
	public class Main extends Sprite
	{	
		private var bd:BitmapData;
		private var prev:Point = new Point();
		private var preview:Sprite;
 
		public function Main()
		{	
			bd = new BitmapData(stage.stageWidth, stage.stageHeight, false);
			addChild(new Bitmap(bd));
 
			preview = new Sprite();
			addChild(preview);
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		}
 
		private function onMouseDown(event:MouseEvent):void
		{	
			prev.x = mouseX;
			prev.y = mouseY;
 
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
		}
 
		private function onMouseMove(event:MouseEvent):void
		{
			preview.graphics.clear();
			preview.graphics.lineStyle(1.0, 0x9F9F9F);
			preview.graphics.drawRect(prev.x, prev.y, mouseX - prev.x, mouseY - prev.y);
		}
 
		private function onMouseUp(event:MouseEvent):void
		{
			preview.graphics.clear();
			preview.graphics.lineStyle(8.0, int.MAX_VALUE * Math.random());
			preview.graphics.drawRect(prev.x, prev.y, mouseX - prev.x, mouseY - prev.y);
 
			bd.draw(preview);
 
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
		}
	}
}
 

|新しいページ|検索|ページ一覧|RSS|@ウィキご利用ガイド | 管理者にお問合せ
|ログイン|