iOS Dev : Zoom & Rotation UIImageView using Gesture Recognizer


iOS Dev : Zoom & Rotation UIImageView using Gesture Recognizer
มาเขียนซูมและหมุนรูปภาพโดยใช้ Gesture Recognizer กัน

วันนี้เรามาศึกษาวิธีการซูมภาพและการหมุนภาพโดยการใช้ Gesture Recognizer โดยการใช้ Xcode 4.2 และ Storyboard กันครับ การเขียนโค้ดที่ไม่ยากนักแต่เทคนิคต่างๆ นั้นจะทำให้เราเข้าใจการทำงานของ Gesture Recognizer มากขึ้น

 

1. เริ่มกันเลยนะครับ ด้วยการสร้างโปรเจคแบบ SigleView และเลือกใช้งาน Storyboard ด้วยนะครับ

2. มาที่ Project แล้ว import รูปเข้าใส่โปรเจค

3. มาที่ Storyboard เพิ่ม UIImageView เข้าไป และใส่รูปภาพเข้าไป

4. ลาก Rotation Gesture Recognizer เข้ามาที่ view

ตรงนี้ต้องสังเกตการเชื่อม Reference Outlet Collections ของ Rotation Gesture Recognizer ด้วยนะครับ ว่ามันเชื่อมอยู่กับ view หากไม่เชื่อมดังรูปให้ลาก Rotation Gesture Recognition ไปวางไว้ที่ view

5. เชื่อม selector จาก Rotation Gesture Recognizer มายังโค้ด .h

ตรงนี้ต้องดูนะครับ ตอนที่เราตั้งชื่อฟังก์ชั่นนั้น ชนิดของพารามิเตอร์ยังเป็น (id) หรือป่าว หากเป็น (id) ให้เปลี่ยนเป็น (UIRotationGestureRecognizer*) ครับ

6. เชื่อม UIImageView กับตัวแปร

7. มาที่ฟังก์ชั่น selector event ที่เราสร้างเชื่อมกับ Rotation Gesture Recognizer ตัวอย่างนะครับ


- (IBAction)rotateAndzoom:(UIRotationGestureRecognizer*)sender {

}

7.1 เรากำลังจะมาคำนวณการหมุนของรูปกันแล้ว

คลาส UIRotationGestureRecognizer ให้อะไรที่เราจะได้ใช้บ้าง ??? แน่นอนครับ มันต้องให้ว่าตอนนี้มีการ Touch กี่นิ้ว และแต่ละนิ้วอยู่ตำแหน่งไหน จากนั้นเราก็คำนวณมุมระหว่างสองนิ้ว (เลือกเฉพาะแต่สองนิ้วเท่านั้นนะ) ออกมาเป็นค่าที่จะให้รูปหมุน มาดูโค้ดกันเลย


- (IBAction)rotateAndzoom:(UIRotationGestureRecognizer*)sender {

int ntouch = [sender numberOfTouches];//จำนวนนิ้วที่มีการ Touch

if(ntouch==2){// เลือกเอาเฉพาะที่เกิดจากการ Touch  2 นิ้วเท่านั้น

CGPoint g1 = [sender locationOfTouch:0 inView:self.view]; //ตำแหน่งของ นิ้วแรก

CGPoint g2 = [sender locationOfTouch:1 inView:self.view]; //ตำแหน่งของ นิ้วที่สอง

//Rotate

/*หาค่ามุมระหว่าง 2 จุด ใช้สูตร arctan(y1-y2,x1-x2) หากยังจำกันได้ในวิชาเลข tan() = dy/dx นั้นหละครับ arctan ก้อกลับกันเพื่อหาแค่ มุม เฉยๆ ค่าที่ได้จะได้ -3 ถึง 3 นะครับ น่าจะหมายถึง quadrants ด้านที่ 0 1 2 3*/
float t = atan2f(g1.y-g2.y, g1.x-g2.x);
aImage.transform = CGAffineTransformMakeRotation(t); //เซ็ตค่าการหมุนของภาพให้ UIImageView

}

}


7.2 จากที่เราได้การหมุนแล้วนะครับ เราจะทำการซูมบ้างนะครับ จะทำต่อจาก การหมุนเลย เพราะเมื่อเราหมุนรูปแล้วอยากจะให้ซูมได้ด้วย

ในการซูมภาพนั้นเราจะคำนวณความห่างระหว่าง นิ้วสองนิ้ว แล้วนำมาคิดเป็นค่า scale เพื่อจะใช้ในการซูม ตามโค้ด (ต่อจากบรรทัด aImage.transform…. นะครับ)


//Zoom

float dist = sqrtf(powf(g1.x-g2.x, 2)+powf(g1.y-g2.y, 2));// สูตรหาระยะห่างระหว่างจุดสองจุด sqrt(dx^2+dy^2)

/* ค่าที่จากการหาระยะห่างจะได้เป็น px ออกมาครับ ดังนั้นจึงต้องทำการ ปรับให้อยู่ในรูปค่า scale ที่สามารถนำไปใช้ได้ ในตัวอย่างผมใช้ค่า ครึ่งหนึ่งของความกว้างสกีนมาหาร มันจะได้เป็นค่า scale ออกมา *ค่า scale นี้เราสามารถใช้สูตรคำนวณต่างๆ ได้ตามความเหมาะสมเลยนะครับ */
float scale = dist/(self.view.bounds.size.width/2);

/* การเปลี่ยนขนาด scale จากค่า transform ค่าเดิม จะเห็นว่าเราส่งค่า aImage.transform เข้าไปด้วยเพื่อให้ฟังก์ชั่นนี้ใช้ค่าเดิมเอาไปคำนวณนั้นเอง*/
aImage.transform = CGAffineTransformScale(aImage.transform, scale, scale);


เรามาดูโค้ดเต็มในฟังก์ชั่น selector event กันดีกว่า


- (IBAction)rotateAndzoom:(UIRotationGestureRecognizer*)sender {

int ntouch = [sender numberOfTouches];

if(ntouch==2){

CGPoint g1 = [sender locationOfTouch:0 inView:self.view];

CGPoint g2 = [sender locationOfTouch:1 inView:self.view];

//Rotate

float t = atan2f(g1.y-g2.y, g1.x-g2.x);

aImage.transform = CGAffineTransformMakeRotation(t);

//Zoom

float dist = sqrtf(powf(g1.x-g2.x, 2)+powf(g1.y-g2.y, 2));

float scale = dist/(self.view.bounds.size.width/2);

aImage.transform = CGAffineTransformScale(aImage.transform, scale, scale);

}

}

เห็นไม่ครับว่าการ Zoom พร้อมกับการ Rotate รูปนี่ทำไม่ยากเลย แค่เขียนโค้ดไม่กี่บรรทัดก็ได้แล้ว แค่เรารู้หลักการของมันเท่านั้นเองครับ สำหรับเพื่อนๆ ที่ยังมีข้อสงสัยเกี่ยวกับการทำซูมและหมุนรูปในบทความนี้สามารถ คอมเม้นมาได้เลยนะครับ และสิ่งที่สำครับเหลือเวลาอีกไม่กี่วันแล้วนะครับจะได้เริ่มเปิดเว็บใหม่สักที ที่ www.adayd3sign.com อย่าลืมเข้าไปพบกันให้ได้นะครับ

Reference

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on ธันวาคม 21, 2011, in [Dev] iOS and tagged , , , , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: