Sürükle-Bırak (2-Tek Noktası Değişen Üçgen)

Merhaba,

Bu dersimizde bir önceki Sürükle-Bırak dersinde öğrendiğimiz startDrag ve stopDrag Komutlarıyla basit bir uygulama yapacağız.Gene her işimizi kodlarla halledip sahneye birşey çizmiyeceğiz.

Yapacağımız uygulamada bir adet üçgenimiz olacak ve üçgenin bir ucu sürüklenebilir olacaktır.Böylece üçgenin boyutları anlık değiştirilebilecek.Öncelikle her uygulama geliştirirken en başta yapacağınız mantıksal düşünmemizi gerçekleştirelim ;

Yapmak istediğimiz bir üçgen.Demekki biz 3 adet nokta oluşturup bunların arasında üçgen çizimi oluşturabiliriz.Daha sonra bu noktalardan herhangi birine sürükleme komutlarımızı ekleyerek sürüklenebilir yaparız.Şimdi kodlarla nasıl yapıldığını görelim…

1-Gerekli Nesnelerin Oluşturulması

/*Sahnemizin width ve height değerlerini atayacağımız
değişkenler oluşturalım*/
var sWidth:Number = 400;
var sHeight:Number = 300;
 
//Gerekli nesneleri sprite() türünde oluşturalım
var sahne:Sprite = new Sprite();
var ucgen:Sprite = new Sprite();
var nokta1:Sprite = new Sprite();
var nokta2:Sprite = new Sprite();
var snokta:Sprite = new Sprite();
 
//Sahneyi ekrana diğer öğeleride sahneye ekleyelim
addChild(sahne);
sahne.addChild(ucgen);
sahne.addChild(nokta1);
sahne.addChild(nokta2);
sahne.addChild(snokta);
 
//Sahnemizin grafiksel özelliklerini verelim
sahne.graphics.lineStyle(1,0x000000);
sahne.graphics.beginFill(0xCCCCCC);
sahne.graphics.drawRect(0,0,sWidth,sHeight);
sahne.graphics.endFill();
sahne.x = 20;
sahne.y = 20;
 
//Nokta1 in grafiksel özelliklerini verelim
nokta1.graphics.lineStyle(1,0x000000);
nokta1.graphics.beginFill(0xFF0000);
nokta1.graphics.drawCircle(0,0,5);
nokta1.graphics.endFill();
nokta1.x = 50;
nokta1.y = 50;
 
//Nokta2 nin grafiksel özelliklerini verelim
nokta2.graphics.lineStyle(1,0x000000);
nokta2.graphics.beginFill(0x0000FF);
nokta2.graphics.drawCircle(0,0,5);
nokta2.graphics.endFill();
nokta2.x = 50;
nokta2.y = 250;
 
//snokta(sürüklenen nokta) grafiksel özellikleri
snokta.graphics.lineStyle(1,0x000000);
snokta.graphics.beginFill(0x00FF00);
snokta.graphics.drawCircle(0,0,5);
snokta.graphics.endFill();
snokta.x = 150;
snokta.y = 150;

2-Sürüklenen Nokta Ayarları

snokta.addEventListener(MouseEvent.MOUSE_DOWN,sbaslat);
function sbaslat(evt:MouseEvent):void
{
	stage.addEventListener(MouseEvent.MOUSE_MOVE,noktasurukle);
}
 
function noktasurukle(evt:MouseEvent):void
{
	snokta.x = degerX(sahne.mouseX);
	snokta.y = degerY(sahne.mouseY);
	ucgenciz();
	evt.updateAfterEvent();
}
 
stage.addEventListener(MouseEvent.MOUSE_UP,sdurdur);
function sdurdur(evt:MouseEvent):void
{
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,noktasurukle);
}

3-Üçgen Oluşturma

function ucgenciz():void
{
	ucgen.graphics.clear();
	ucgen.graphics.lineStyle(1,0x000000);
	ucgen.graphics.beginFill(0xFFAAFF);
	ucgen.graphics.moveTo(nokta1.x,nokta1.y);
	ucgen.graphics.lineTo(nokta2.x,nokta2.y);
	ucgen.graphics.lineTo(snokta.x,snokta.y);
	ucgen.graphics.lineTo(nokta1.x,nokta1.y);
	ucgen.graphics.endFill();
}
 
function degerX(inX:Number):Number
{
	if(inX < 0) 	{ 		return 0; 	} 	if(inX > sWidth)
	{
		return sWidth
	}
	return inX;
}
 
function degerY(inY:Number):Number
{
	if(inY < 0) 	{ 		return 0; 	} 	if(inY > sHeight)
	{
		return sHeight;
	}
	return inY;
}
 
//Başlangıçtada üçgenimizin gözükmesi için ucgenciz fonksiyonunu çalıştıralım
ucgenciz();

Test Movie yaptığınızda aşağıdaki uygulamayı yaptığınızı görebilirsiniz :)

Sıradaki yazı olan Çoklu Sürüklenen Nokta Makalesinde görüşmek üzere…

VN:F [1.8.2_1042]
Rating: 9.3/10 (3 votes cast)
Sürükle-Bırak (2-Tek Noktası Değişen Üçgen)9.3103

2 Responses to “Sürükle-Bırak (2-Tek Noktası Değişen Üçgen)”

  1. atalayyorukoglu atalayyorukoglu diyor ki:

    çalışmaların için teşekkürler

    gibi işaretler < şeklinde gözükmüş yada ben mi öyle görüyorum?

    wordpress ten kaynaklanan bir hatamı öyle ise çözümü nedir?

    şimdiden çok teşekkür ederim.

  2. Selcuk Selçuk diyor ki:

    Benim hatam şu anda düzeltildi…Uyarınız için teşekkürler…

Leave a Reply