블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



ㅁ GDI+의 개요

 -  GDI+(Graphical Device Interface)는 그래픽 프로그래밍을 위한 닷넷 프레임워크 객체 지향적 클래스 라이브러리 이다.
 - GDI+ 는 서로 함께 작동하도록 고안된 여러 클래스들로 구성되어 있다.
 - Visual Studio .NET에서는 두개의 GDI+ 라이브러리가 존재한다.
   하나, .NET GDI+ 라이브러리로 닷넷 프레임워크의 일부로 제공되는 네임스페이스들과 클래스들의
    집합이다.
   둘 , MFC(Microsoft Foundation Class)에는 GDI를 캡슐화하는 여러 C++ 클래스들이 포함되어있
    는데 그것들의 이름도 GDI+ 이다.

GDI의 주요 특징

 - 창, 비트맵, 프린터라는 세 종류의 그리기 표면(Drawing Surface)들을 제공한다.

 - 임의의 그리기 표면에 2차원적 "선화(Line_Drawing)"를 그릴 수 있게 하는 도구들을 제공한다. GDI+에서는 다양한 브러시와 펜을 사용해서 여러 종류의 선, 도형, 다각형, 곡선을 그릴 수 있으며, 여러 가지 종류의 변환 기능들이 제공되므로 정교한 효과들을 손쉽게 구현할 수 있다.

 - 다양한 텍스트 그리기 기능을 제공한다. (기하학적 변형, 안티앨리어싱, 팔레트 혼합)

 - 이미지 및 비트맵을 지원한다. 이미지를 읽어서 임의의 그리기 표면에 그리는 것이 가능하며, 이미지를 생성하고 그 안에 다른 그림을 그리는 것도 가능하다.

 - 인쇄를 지원한다. 개발자는 특별한 노력 없이도 인쇄 미리보기 기능을 손쉽게 구현할 수 있다.

 - 닷넷 프레임워크에 완전히 통합되어 있다. 이는 어떠한 종류의 닷넷 응용 프로그램과도 호환될수 있도록 설계될어 있다는 것이다.

ㅁ GDI+ 네임스페이스

 Namespace

 설명

System.Drawing 이것은 막강한 능력을 지닌 Graphics 타입 뿐 아니라 다양한 기본 렌더링 형식을 정의한 GDI+ 핵심 네임스페이스이다.(그리기 표면, 이미지, 브러시, 펜, 폰트 등)
System.Drawing.Drawing2D 좀더 진보된 2차원 그래픽 기능에 사용되는 타입을 제공한다.(고급 래스터 및 벡터 그래픽 기능을 제공하여 gradient 브러시 기법과 기하학적 변형 작업이 가능함)
System.Drawing.Imaging 그래픽 이미지를 직접 다루는 타입을 제공한다.(팔레트 바꾸기, 이미지 메타 데이터 뽑아내기,메타 파일 다루기 등)
System.Drawing.Printing 출력된 페이지에 대한 이미지를 만들어 내고 프린터 자체와 상호 작용하거나 또는 주어진 출력 작업의 외형의 틀을 잡게 해주는 타입을 제공한다.
System.Drawing.Text 폰트 모음을 다르게 해준다. 예를 들어 FontCollection 타입은 동적으로 목표 컴퓨터에 설치된 폰트의 잡합을 찾게 해 준다.
System.Drawing.Design 사용자 지정 컨트롤의 디자인 시점 지원을 개선하기 위한 기능을 제공한다. Visual Studio .NET의 디자인 창 안에서 사용자 지정 컨트롤의 행동을 커스텀화하는데 쓰이는 커스텀 UITypeEditor클래스 개발을 위한 클래스들 포함되어 있다.

 위 표는 6개의 GDI+ 주요 네임스페이스 이다. 이중에서도 GDI+ 어플리케이션 프로그래밍을 작성할때 많이 사용되는 타입들은 System.Drawing 네임스페이스 내에 정의 되어 있다. (System.Drawing : 이미지, 브러시, 펜, 폰트를 표현하는 클래스 뿐만 아니라 Color,Point 그리고Rectangle과 같은 많은 연관된 타입들이 정의되어 있다.)

ㅁ System.Drawing 네임스페이즈의 주요 클래스 목록

 Class

 설명

 Bitmap  픽셀 데이터로 정의된 이미지를 사용하여 작업하는 데 사용된 개체, 그래픽 이미지의 픽셀 데이터와특성으로 구성되는 GDI+ 비트맵을 캡슐화
 Brush  사각형, 타원, 파이, 다각형 및 경로와 같은 그래픽 도형의 내부를 채우는데 사용된 개체
 Brushes  모든 표준 색에 사용되는 브러시
 BufferedGraphics  더블 버퍼링을 위한 그래픽 버퍼 지원
 BufferedGraphicsContext  더블 버퍼링을 사용할 수 있도록 그래픽 버퍼들의 생성 메소드들을 지원
 BufferedGraphicsManager  어플리케이션 도메인에 대한 그래픽스 컨텍스트 객체의 메인 버퍼 접근을 지원한다.
 ColorConverter  한 데이터 형식에서 다른 데이터 형식으로 색상을 변환
 ColorTranslator  색을 GDI+ Color 구조체로 변환하거나 구조체에서 변환
 Font  글꼴, 크기, 스타일 특성을 포함하여 텍스트의 특정 형식을 정의
 FontConverter  한 데이터 형식에서 다른 데이터 형식으로 Font개체를 변환
 FontFamily  비슷한 기본 디자인 및 스타일의 특정 변형이 있는 형식의 그룹을 정의
 Graphics  GDI+ 그리기 화면을 캡슐화
 Icon  Windows 아이콘을 나타내는데 사용
 IconConverter  개체를 한 데이터 형식에서 다른 것으로 변환
 Image  Bitmap, Icon 및 Metafile 하위 클래스에 기능을 제공하는 기본 클래스
 ImageAnimator  시간 기반 프레임을 가진 이미지에 애니메이션 효과를 줌
 ImageConverter  하나의 데이터 형식에서 다른 데이터 형식으로 Image 개체를 변환
 ImageFormatConvertor  하나의 데이터 형식에서 다른 데이터 형식으로 색상을 변환
 Pen  선과 곡선을 그리는데 사용되는 개체의 정의

 Pens  모든 표준 색에 사용되는 펜
 PointConverter  하나의 데이터 형식에서 다른 데이터 형식으로 Point 개체를 반환
 RectangleConverter  한 데이터 형식에서 다른 데이터 형식으로 사각형을 반환
 Region  사각형과 경로로 구성된 그래픽 모양의 내부를 설명
 SizeConverter  하나의 데이터 형식에서 다른 데이터 형식으로 변환하는데 사용
 SolidBrush  단일 색의 브러시를 정의
 StringFormat  맞춤 및 줄 간격과 같은 텍스트 레이아웃 정보를 캡슐화하고, 줄임표(...) 삽입과 국가별 숫자 대체와 같은 조작 및 OpenType 기능을 표시
 SystemBrushes  각 속성은 Windows 표시 요소의 색인 SolidBrush 개체
 SystemColors  각 속성은 Windows 표시 요소의 색인 Color 구조체
 SystemIcons  각 속성은 Windows 시스템 아이콘의 Icon 개체
 SystemPens  각 속성은 Windows 표시 요소의 색이며 너비가 1인 Pen 개체
 TextureBrush  각 속성은 이미지를 사용하여 도형 내부를 채우는 Brush 개체
 ToolboxBitmapAttribute  지정된 구성 요소와 관련된 이미지를 정의

Graphics객체는 Windows 폼에 위해 생성할 수 있으며, 이미지 클래스에서 파생된 객체를 통해서도 생성 할 수 있다. Graphics 객체와 함께 사용될 주요 객체는  Pen Class, Brush Class, Font Class, Color Struct 등이 있다.

안티앨리어싱 ★----------------------------------------------------------------------
앨리어싱으로 인해 거칠어진 이미지나 사운드를 다듬어 주는 기법이다. 앨리어싱은 가장자리가 톱니 모양처럼 들쭉날쭉하게 되는 계단 효과가 나타나는 것을 말하는데, 이러한 것들을 없애기 위한 것이 바로 안티앨리어싱 기법이다. 이미지에서 앨리어싱을 제거하기 위한 방법으로는 보통 픽셀의 위치나 명암을 조정하여 설정하는 방법이 있는 데, 이렇게 하면 선의 색상과 배경의 색상 사이에 좀 더 점진적인 변화가 생기도록 조종하므로 애리어싱을 제거할 수 있다.
----------------------------------------------------------------------------------------

 - 참고 서적 : C# 게임 프로그래밍 -

Posted by happydong
, |



주의 : 해당 내용은 실버라이트 1.1버전을 내용을 작성된 내용입니다. 현재 나와 있는 버전과 차이가 있어 버그가 있을수 있습니다. 참고하세요!!
 


[무한도전] Silverlight 메뉴바 만들기 (5)

이번에는 Stroyboard를 사용해서 마우스가 Maine Menu에 올라왔을 SubMenu가 보여지도록 해보겠습니다.

아래 그림을 보면서 설명하도록 하겠습니다.

1. 그림

사용자 삽입 이미지

Blend 아래 보시면 "Objects and Timeline"이라는 텝이있는데, 거기서 {No Storyboard open}이라는 거 옆에 ">"이런게 있는 것을 보실수 있을 것입니다. 그 걸 클릭하시면 위 그림과 같은 창이 나타나는 데요..거기에서 "+"를 클릭하시면 아래와 같은 창이 나타나게 됩니다.


2. 그림

사용자 삽입 이미지

위 그림과 같은 창이 나타나면 Name 을 설정하고 OK를 클릭하면 마치 화면이 녹화 되듯이 빨간색으로 테두리가 감싸저있는  모습을 볼수 있을 겁니다. (아래 그림 참고)

3. 그림

사용자 삽입 이미지

마치 녹화가 되는 모습아닙니까..^^그리고 Blend 아래를 보시면 Timeline이 나타날것입니다. 아래그림과 같이 말이지요~^^

4. 그림

사용자 삽입 이미지

자~ 이제 어느정도 Storyboard  만들기가 갖추어 진것 같군요!
이제 본격적으로 만들어 보도록 하지요..ㅋ저는 1초동안에 SubMenu가 열리도록 할 것 입니다. 그럼 1초부분에는 stroy가 완성되어 있어야 겠네요!!그럼 일단 Timeline을 1초로 옮긴다음에 완성된 그림들 설정해 보도록 하겠습니다.

5.그림

사용자 삽입 이미지

위 그림처럼 변형이 될 객체를 클릭합니다. 그럼 Timeline부분에 Name이 선택이 되고요 그다음에 Timeline의 시간이 나타나있는 부분에 "+"를 클릭합니다 .그럼 해당 Name 키프레임이 생성이 됩니다. 그 다음에 객체를 변형 합니다. 저는 아래와 같이 해보았습니다.

6.그림

사용자 삽입 이미지

간단하게 Mainebar 객체의 높이를 늘렸습니다. 이렇게 하고 난 뒤에 Play 버톤을 클랙해 봅니다. 그럼 시간에 흐름에 따라 자연스럽게 변형되지 않습니까~^^ 신기하죠!이런식으로 해서 애니메이션을 만들면 됩니다.
제가 만든 Story를 보도록 하겠습니다.


7.그림

사용자 삽입 이미지

저는 0.3초에 Menu01과 txt_m1이 커지길 바래서 이렇게 Blend 오른쪽에 보시면 Transform 이라는 템이 있습니다 .거기에서 Scale를 선택한다음 X 를 1.25 Y 를 1.25로 설정했습니다 .이거이 무엇이냐시간의 흐름에 따라 크기를 커지게하는 것이지요!! 저는 그 다음에 0.5에 부분에서 다시 X 를 1 Y를 1로 설정했습니다 . 이렇게 한번만 하면 재미 없으니깐 0.7초에는 다시 1.25로 설정하고, 1초에는 1로 설정을 했습니다. 그렇게 하두 난뒤에 한번 Play를 해보세요~^^멋지지 않습니까..
이제는subMenu가 없어 졌다가 1초후에 나타나게 하면 되겠지요...^^ 대충 집작들 하셨으리라 생각 되는군요.아래 그림과 같이 SubMenu와 관련된 객체들을 Timelien을 1초로 옮기도록 합니다. 그리고 나서 키프레임을 찍도록 합니다.

8. 그림

사용자 삽입 이미지

위 그림과 같이 Opacity를 88%로 설정을 합니다(Opacity는 불투명도 입니다.)
그런다음에 SubMenu와 관련된 객체들을 0초로 옮기도록 합니다. 그리고 객체들을 뭉쳐두도록 합니다. 아래 그림을 참고 하세요!

9. 그림

사용자 삽입 이미지


이렇게 하고 난 뒤에 아래 그림과 같이 Opacity를 0 으로 설정합니다.


10.그림

사용자 삽입 이미지


그럼 Play 했을때 없다가 1초후에 나타 나겠지요~^^ 한번 실행해 보세요~이런식으로 하면 여러가지 애니메이션을 만들수 있습니다. 제가 만들었던 애니메이션과 약간은 다른데....쯤쯤...이 다음 강좌부분에 제가 만든 소스도 올려드릴테니 참고하세요~^^;;
아무튼 위와 같은 방법을 해서 나머지 3개의 애니메이션도 각각에 알맞게 만들어 줍니다.
저는 Menu1_Story, Menu2_Story, Menu3,_Story, Menu4_Story 4개를 만들었습니다. 이렇게 만들어둔 Stroyboard를 비하인드 코드에서 실행하면 됩니다. 비하인드 코드부분은 이 다음 "[무한도전] Silverlight 메뉴바 만들기 (6)" 에서 자세하게 다루어 보도록 하겠습니다.

여기까지 읽어 주시고 따라해 주셔서 감사합니다~^^

Posted by happydong
, |



주의 : 해당 내용은 실버라이트 1.1버전을 내용을 작성된 내용입니다. 현재 나와 있는 버전과 차이가 있어 버그가 있을수 있습니다. 참고하세요!!


[무한도전] Silverlight 메뉴바 만들기 (4)


계속해서 내용을 이어가도록 하겟습니다. 이제 TextBlock를 이용해서 Menu라는 내용을 적어 보도록 하지요..아주 간단합니다. Blend를 이용하면 말이지요!^^;; 아래 그림을 보면서 따라해 보도록 하세요~^^

1. 그림

사용자 삽입 이미지

왼쪽에 보시면 "TextBlock"라는 메뉴가 있습니다. 마우스로 선택을 하시고...원하는 위치에  마우스로 글거주시면...(표현이 좀..그런가요..ㅋ)됩니다. 그리고 나서 바로 입력할 내용을 적으시면 되고, Text 내용을 변경하고 자하면 아래 그림을 참고해서 변경하시면 됩니다.

2. 그림

사용자 삽입 이미지

위 그림처럼 Text 라는 부분이 보이 실것입니다. 여기서 내용을 변경하면 되는 것이지요! 역시 제일 위 부분에 Name을 지정할 수 있습니다. 저는 txt_m4라고 했군요!^^  만들어진 Textblock를 원하는 위치로 옮기면 되겠습니다.저는 이렇게 하나를 만들어서 Ctrl + C & V로 나머지 3개를 만든후 위치를 정렬했습니다~^^;;;아래 표는 각각의 NameText를 제가 어떻게 설정했는지를 보여주는 표입니다.

 Name

 Text

 txt_m1

 Menu01

 txt_m2

 Menu02

 txt_m3

 Menu03

 txt_m4

 Menu04

오호~ 이렇게 하니깐 좀더 메뉴바 답지 않습니까..^^;;이제는 SubMenu를 만들어야 겠지요. 제가 따로 설명없이 그림만 보여주면 고대로 따라 만드실 수 있겠지요..^^꼭 제것과 똑같이 만드실 필요는 없습니다. 사람의 취향이 다르기 때문에...ㅋㅋ 아무튼 저는 아래 그림과 같이 SubMenu를 만들어 보았습니다.

3. 그림

사용자 삽입 이미지

한번에 만드실수 있겠지요!^^ 아래 SubMenu를 만들기 귀찮으신 분들은 아래 코드를 가져다가 붙어 넣으세요~^^;;; 코드가 좀 길죠~^^;;;

 XAML Code

 <Rectangle OpacityMask="#FFF8C1C1" RenderTransformOrigin="0.5,0.5" x:Name="SubMenuber01" Width="310" Height="27" Stroke="#FF000000" RadiusX="13" RadiusY="13" Canvas.Left="91" Canvas.Top="180" Opacity="0">

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

    <Rectangle.Fill>

      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

        <GradientStop Color="#FF313131" Offset="0"/>

        <GradientStop Color="#FFFAF1F1" Offset="1"/>

        <GradientStop Color="#FF595959" Offset="0.183"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

  <Rectangle x:Name="submenu1" Width="82" Height="23" Stroke="#FF000000" RadiusX="13" RadiusY="13" Canvas.Left="104" Canvas.Top="182" Opacity="0" RenderTransformOrigin="0.5,0.5">

    <Rectangle.Fill>

      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

        <GradientStop Color="#FFFCF9FF" Offset="0"/>

        <GradientStop Color="#FFDB75FD" Offset="1"/>

        <GradientStop Color="#FFDDC3FA" Offset="0.183"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

  </Rectangle>

  <TextBlock x:Name="txtsub1" Width="70" Height="18" Canvas.Left="112" Canvas.Top="184" FontSize="12" Text="subMenu01" TextWrapping="Wrap" Canvas.ZIndex="4" Opacity="0" Cursor="Hand" RenderTransformOrigin="0.5,0.5">

    <TextBlock.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </TextBlock.RenderTransform>

  </TextBlock>

  <TextBlock x:Name="txtsub2" Width="70" Height="18" Canvas.Left="209" Canvas.Top="184" FontSize="12" Text="subMenu02" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" Canvas.ZIndex="1" Opacity="0" Cursor="Hand">

    <TextBlock.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </TextBlock.RenderTransform>

  </TextBlock>

  <Rectangle x:Name="submenu2" Width="82" Height="23" Stroke="#FF000000" RadiusX="13" RadiusY="13" Canvas.Left="201" Canvas.Top="182" RenderTransformOrigin="0.5,0.5" Opacity="0">

    <Rectangle.Fill>

      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

        <GradientStop Color="#FFFCF9FF" Offset="0"/>

        <GradientStop Color="#FFDB75FD" Offset="1"/>

        <GradientStop Color="#FFDDC3FA" Offset="0.183"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

  </Rectangle>

  <TextBlock x:Name="txtsub3" Width="70" Height="18" Canvas.Left="306" Canvas.Top="184" FontSize="12" Text="subMenu03" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" Canvas.ZIndex="1" Opacity="0" Cursor="Hand">

    <TextBlock.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </TextBlock.RenderTransform>

  </TextBlock>

 

  <Rectangle x:Name="submenu3" Width="82" Height="23" Stroke="#FF000000" RadiusX="13" RadiusY="13" Canvas.Left="298" Canvas.Top="182" RenderTransformOrigin="0.5,0.5" Opacity="0">

    <Rectangle.Fill>

      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

        <GradientStop Color="#FFFCF9FF" Offset="0"/>

        <GradientStop Color="#FFDB75FD" Offset="1"/>

        <GradientStop Color="#FFDDC3FA" Offset="0.183"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

    <Rectangle.RenderTransform>

      <TransformGroup>

        <ScaleTransform ScaleX="1" ScaleY="1"/>

        <SkewTransform AngleX="0" AngleY="0"/>

        <RotateTransform Angle="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Rectangle.RenderTransform>

  </Rectangle>


SubMenu들의 뒤에 있는 RectangleNameSubMenuber01 입니다.  그리고 Textblock 뒤에 있는 RectangleName은 (왼쪽에서부터) submenu1, submenu2, submenu3 입니다. TextBlock은 아래 표를 참고 하시기 바랍니다.

 Name

Text 

 txtsub1

subMenu01

 txtsub2

subMenu02

 txtsub3

subMenu03






자 이제는 마우스가 Maine Menu에 올라 왔을때 SubMenu들이 나타나게 해야 겠지요^^ 그 부분은 Storyboard를 이용해서 만들면 됩니다.  Storyboard  [무한도전] Silverlight 메뉴바 만들기 (5) 에서 알아 보도록 하겠습니다. 지금까지 읽어 주셔서 감사 합니다.

Posted by happydong
, |