투명화 처리로 살펴 본 한층 고급화된 모바일 ux

21
진대연

Upload: dae-yeon-jin

Post on 04-Jul-2015

335 views

Category:

Documents


1 download

DESCRIPTION

윈도우폰 6.5 개발 가이드

TRANSCRIPT

Page 1: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

진대연

Page 2: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

네이버 스마트폰 카페 개발자 모임 스텝 ‘대연군’

cafe.naver.com/bjphone

“한 바보가 할 수 있는 것은 다른 바보도 할 수가 있는 것”

- 실바누스 P.톰슨 -

Page 3: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 4: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 5: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Windows Mobile 개발환경

• 관련 정보 링크 : http://cafe.naver.com/bjphone/351599

Page 6: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

3반투명 효과

2투명화 처리

1깜빡임 제거

반투명

불투명

Page 7: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 8: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

8

protected override void OnPaintBackground(PaintEventArgs

e)

{

}

Page 9: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

일반적인 그리기

더블버퍼링을 이용한 그리기

backbuffer

Page 10: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

// 당구공 이미지가 실제 그려지는 목적 Rectagle 의 크기 : 당구대 가로

길이의 약 5%

// 당구공 이미지의 목적 Rectagle에 실제이미지를 넣어 넣어 그린후 투명

값을 넣어준다.

Graphics g = Graphics.FromImage(backbuffer);

// 당구공 이미지가 실제 그려지는 목적 Rectagle 의 크기 :

당구대 가로 길이의 약 5%

// 당구공 이미지의 목적 Rectagle에 실제이미지를 넣어 넣어 그린후

투명 값을 넣어준다.

e.Graphics.DrawImage(backbuffer, 0, 0);

Page 11: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 12: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Graphics.DrawString (String, Font, Brush, RectangleF)

Graphics.DrawString (String, Font, Brush, RectangleF, StringFormat)

Graphics.DrawString (String, Font, Brush, Single, Single)

Graphics.DrawString (String, Font, Brush, Single, Single, StringFormat)

Page 13: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Graphics.DrawString (String, Font, Brush, RectangleF)

Graphics.DrawString (String, Font, Brush, RectangleF, StringFormat)

Graphics.DrawString (String, Font, Brush, Single, Single)

Graphics.DrawString (String, Font, Brush, Single, Single, StringFormat)

/* 문자열의 투명화 처리 */

string sExample = " 투명화 처리\n예제 프로그램";

textWidth = (int)(g.MeasureString(sExample, this.Font).Width);

textHeight = 30;

g.DrawString(sExample, this.Font, new SolidBrush(Color.Blue),

new RectangleF(this.ClientRectangle.Width / 2

- textWidth / 2, this.ClientRectangle.Height * 0.8f, textWidth, textHeight * 2));

Page 14: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Graphics.DrawImage (Image, Rectangle, Single, Single, Single, Single, GraphicsUnit, ImageAttributes)

Page 15: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Graphics.DrawImage (Image, Rectangle, Single, Single, Single, Single, GraphicsUnit, ImageAttributes)

/* 이미지의 투명화 처리 */

// ImageAttrubutes 객체 생성

System.Drawing.Imaging.ImageAttributes attr = new System.Drawing.Imaging.ImageAttributes();

// 투명화 처리를 원하는 색을 가져와 attr.SetColorKey 에 저장한다.

// 본 예제에서는 이미지의 (0,0) pixel 값을 투명색으로 설정함.

attr.SetColorKey(_ballImage.GetPixel(0, 0), _ballImage.GetPixel(0, 0));

// 당구공 이미지가 실제 그려지는 목적 Rectagle 의 크기 : 당구대 가로 길이의 약 5%

Rectangle destRect = new Rectangle(ballX, ballY, ballSizeWidth, ballSizeHeight);

// 당구공 이미지의 목적 Rectagle에 실제이미지를 넣어 넣어 그린후 투명 값을 넣어준다.

g.DrawImage(_ballImage, destRect, 0, 0, _ballImage.Width, _ballImage.Height, GraphicsUnit.Pixel, attr);

Page 16: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 17: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

public static void DrawAlpha(Graphics gx, Bitmap image, byte transp, int x, int y)

Page 18: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

• public static void DrawAlpha(Bitmap image, byte transp, int x, int y)

// 반투명 이미지를 당구대 바닥에 그린다.

Page 19: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX
Page 20: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX

Code Project Mobile Development Forum

MSDN Windows Mobile

네이버 스마트폰 카페 개발자 포럼

Page 21: 투명화 처리로 살펴 본 한층 고급화된 모바일 UX