TÌM HIỂU VỀ XỬ LÝ ĐỒ HỌA TRONG SILVERLIGHT

Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP NHẬN THỨC NGÀNH CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI : TÌM HIỂU VỀ XỬ LÝ ĐỒ HỌA TRONG SILVERLIGHT

SINH VIÊN : Lã Xuân Tâm

GVHD : ThS Võ Đức Hoàng

Đà Nẵng, 11/2011

Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft Net,nó cho phép phát triển các ứng dụng đa phương tiện đặc biệt là các ứng dụng trên web cho phép xây dựng các ứng dụng chạy trên đa trình duyệt như Internet Explorer,

Firefox,Safari và cung cấp nhiều tính năng tương tự Flash(Adobe) , HTML5 Silverlight có khả năng truyền tải nhanh chóng dữ liệu, âm thanh và hình ảnh chất lượng cao

Silverlight cung cấp nhiều lựa chọn cho viêc thêm các tính năng trưc quan thú vị cho ứng dụng Bạn có thể sử dụng vẽ , Shape, Path, và những hình học phức tạp Những khu vực được xác định b i dạng hình thái có thể tô hiệu ứng , như là ảnh, d ải màu, hoặc là đoạn video , thông qua viêc sử dụng Brush

Silverlight kế thừa một thư viện đồ họa khá đầy đủ từ WPF(Windows

Presentation Foundation).Dưới đây chúng ta sẽ lần lượt làm quen với các đối tượng

đồ họa như Ellipse, Line, Path, Polygon, Geometries, Brushes…

Em xin chân thành cảm ơn thầy Th.S Võ Đức Hoàng đã hướng dẫn em hoàn thành đồ án thực tập nhận thức này

Sinh viên thực hiện

Lã Xuân Tâm

MỤC LỤC

Phần I : 1

Phần II: Nội Dung Đề Tài 2

Chương 1 : Giới thiệu về đề tài 2

Chương 2 : Xử Lý Đồ Họa Trên Silverlight 2

I Các Hình Họa Cơ Bản (Shapes): 2

I.1 Ellipse : 2

I.2 Line: 3

II Đối Tượng Hình Họa Khác 3

II.1 Polygon(đa giác) : 3

II.2 Polyline: 4

II.3 Path: 4

III Brushes: 4

III.1 Solid Color Brush: 4

III.2 Gradient Brush: 5

III.2.1 LinearGradientBrush : 5

III.2.2 RadialGradientBrush 5

III.2.3 ImagesBrush 6

IV Các Thuộc tính đồ họa chung: 7

IV.1 Thuộc Tính Opacity: 7

IV.2 Thuộc tính Opacity Mask: 7

IV.3 Thuộc Tính Clip 8

IV.4 Thuộc Tính RenderTransform 8

Chương 3 : Kết Luận 10

DANH MỤC HÌNH ẢNH Hình 2 1: Ellipse 2

Hình 2 2: Line 3

Hình 2 3 :polygon 3

Hình 2 4 : Polyline 4

Hình 2 5 :Path 4

Hình 2 6 : Solidcolor Brush 5

Hình 2 7: LinearGradientBrush 5

Hình 2 8: RadialGradientBrush 6

Hình 2 9:Image Brush 7

Hình 2 10:Opacity 7

Hình 2 11: Opacity Mask 8

Hình 2 12: Clip 8

Hình 2 13: RenderTransform 9

Phần I : Trình bày cảm nhận của nhóm về việc tham quan,tiếp cận môi trường doanh nghiệp

Trong đợt thực tập nhận thức vừa rồi nhóm chúng em được phân công về thực tập tại công ty FSOFT (FPT sowfware) tại Đà Nẵng dưới sự hướng dẫn của thầy Nguyễn Văn Nguyên Trong quá trình thực tập chúng em đã nhận được sự giúp

đỡ rất nhiệt tình của các anh chị hướng dẫn công ty Trước khi thực tập, chúng em

đã có tìm hiểu qua về FSOFT,nhưng quả thực khi đến công ty mới thấy được sự hiện đại và phát triển và quy mô của công ty với các điều kiện về cơ s vật chất ,ngoài ra còn có các sân chơi thể thao,giải trí rất hiện đại,và nhất là sự nghiêm túc làm việc của các nhân viên công ty.Chúng em được tham quan qua công ty,qua các phòng ban,và được các anh giới thiệu về công ty FSOFT Đà Nẵng

Hàng năm công ty luôn có nhiều đợt thực tập cho hàng trăm sinh viên ngành CNTT đến thực tập và thực tập tốt nghiệp hay tham gia làm việc cho công ty,để có thể tr thành nhân viên thì các ứng viên phải trải qua các kỳ sát hạch của công ty,nên hầu hết các ứng viên trúng tuyển đều là những ứng viên có năng lực và được đào tạo bài bản,nếu không công ty sẽ đào tạo thêm các khóa bổ trợ cho họ Và FSOFT đã thực sự là nơi làm việc mơ ước của các bạn đam mê lập trình ,và thực sự

là một nơi để chúng ta có thể áp dụng những kiến thức được giảng dạy trên giảng đường , là nơi để các bạn có thể thể hiện năng lực của mình

Chúng em đã có buổi trò chuyện trao đổi với giám đốc FPT Software Đà Nẵng về định hướng nghề nghiệp và tương lai của ngành Công nghệ thông tin tại

Đà Nẵng,qua cuộc trao đổi các anh cũng đã nêu ra những khó khăn,những thứ mà sinh viên còn thiếu ,những bỡ ngỡ khi ra đời ,những va vấp khi đi làm, và cách xử

lý cũng như kinh nghiệm được rút ra từ bản thân các anh , quả thật đó là những điều hết sức quý giá đối với chúng em,ngoài những kiến thức về chuyên môn chúng em còn được học thêm những kỹ năng làm việc ,nhưng kinh nghiệm những bài học về cuộc sống ,công việc …Qua đó chúng em đã rút ra được nhiều bài học cho bản thân

Và cuối cùng chúng em xin chân thành cảm ơn các anh ,các chị FSOFT đã tạo điều kiện cho chúng em được thực tập và tham quan công ty.Và cảm ơn thầy Nguyễn Văn Nguyên đã nhiệt tình hướng dẫn chúng em hoàn thành tốt đợt thực tập này !

Đề tài:Tìm hiểu về xử lý đồ họa trong Silverlight GVHD:Th.S:Võ Đức Hoàng

SVTH:Lã Xuân Tâm,Lớp 11TLT 2

Phần II: Nội Dung Đề Tài Chương 1 : Giới thiệu về đề tài

Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft Net,nó cho phép phát triển các ứng dụng đa phương tiện đặc biệt là các ứng dụng trên web cho phép xây dựng các ứng dụng chạy trên đa trình duyệt như Internet Explorer,

Firefox,Safari và cung cấp nhiều tính năng tương tự Flash(Adobe) , HTML5

Silverlight có khả năng truyền tải nhanh chóng dữ liệu, âm thanh và hình ảnh chất lượng cao

Silverlight cung cấp một mô hình lập trình lập trình mềm dẻo và đồng nhất,

nó hỗ trợ Ajax, Python, Ruby và các ngôn ngữ lập trình Net như Visual basic, C#

Với việc sử dụng Expression Bend và Visual Studio, các nhà thiết kế và

phát triển có thể hợp tác một cách hiệu quả hơn bằng cách sử dụng chính kỹ năng

của họ có hiện nay để làm phát triển các sản phẩm web tương lai “Light up the

web”

Silverlight cung cấp nhiều lựa chọn cho việc thêm các tính năng trực quản lý thú vị cho các ứng dụng.Chúng ta có thể sử dụng vẽ , Shape, Path, và những hình

học phức tạp Silverlight thừa kế một thư viện đồ họa khá đầy đủ của từ

Chương 2 : Xử Lý Đồ Họa Trên Silverlight

I Các Hình Họa Cơ Bản (Shapes):

Silverlight hỗ trợ đồ họa cơ bản cho phép bạn có thể vẽ được hình ellipse,chữ nhật,đường thẳng,đa giác và các đường cong Các thành phần này gọi chung là các hình họa(Shape)

I.1 Ellipse : bạn có thể tạo một ellipse bằng cách xác định hai thuộc tính cơ bản

là rộng (width) và cao(height):

Hình 2 1: Ellipse

I.2 Line: cho phép vẽ 1 đoạn thẳng giữa hai điểm

Hình 2 2: Line

II Đối Tượng Hình Họa Khác

Ngoài các đối tượng Ellipse,line,và Rectangle,Silverlight còn cung cấp 3 đối

tượng hình họa khác:Polygon,Polyline và Path.Một Polygon(đa giác) là một hình

đóng với 1 số cạnh,trong khi Polyline là một chuỗi các đoạn thẳng nối với nhau,các

đoạn thẳng này có thể tạo thành một hình đóng(đa giác) hoặc không

II.1 Polygon(đa giác) :

Dùng để vẽ đa giác bạn cần cung cấp các điểm và tô màu cho nó qua đặc tính

Fill.ví dụ bên dưới vẽ một đa giác với viền đỏ tía,bên trong tô màu xanh

Hình 2 3 :polygon

Đề tài:Tìm hiểu về xử lý đồ họa trong Silverlight GVHD:Th.S:Võ Đức Hoàng

SVTH:Lã Xuân Tâm,Lớp 11TLT 4

II.2 Polyline: tương tự ví dụ dưới vẽ 1 polyline

Hình 2 4 : Polyline

II.3 Path:

Có thể dùng để biểu diễn một hình dạng phức tạp bao gồm cả cung và đường cong.để dùng Path bạn phải dùng một cú pháp đặc biệt để đặt thuộc tính data của

nó.ví dụ vẽ 3 đối tượng Path

Hình 2 5 :Path

III.Brushes:

Dùng để tô màu các đối tượng trong silverlight với màu đơn,dải nghiêng,bán

kính nghiêng và ảnh

III.1 Solid Color Brush:

Dùng để vẽ một vùng với một màu nào đó.có 3 cách khác nhau để tô màu

với solid color brush:

 Dùng cú pháp để chỉ tên một màu.ví dụ như: black,green,blue

 Dùng bảng mã màu 32bits với định dạng #rrggbb với rr,gg,bb lần lượt là 2 chữ số thập lục phân mô tả mã màu đỏ,xanh lá,xanh lơ,ví dụ

#0033FF.Ngoài ra bạn có thể xét với định dạng m rộng #aarrggbb ,aa

mô tả giá trị anpha,chỉ ra độ trong suốt.ví dụ #990033FF

 Ngoài ra cũng có thể tạo một đối tượng solidcolorbrush riêng và đặt thuộc

tính color cho nó,dùng 1 trong những định dạng màu phía trên

Ví dụ dưới đây dùng các cách vẽ trên để vẽ đối tượng bằng 4 cách

Hình 2 6 : Solidcolor Brush

III.2 Gradient Brush:

Vẽ một khu vực với nhiều màu sắc pha trộn vào nhau dọc theo một trục.bạn có thể sử dụng chúng để tạo ra hiệu ứng ánh sang và bóng.Mang lại cho thành phần đồ họa của bạn cảm giác 3 chiều.bạn cũng có thể sử dụng chúng để mô tả kinh,nước,và

các bề mặt mịn.Silverlight cung cấp 2 loại gradient brush là: LinearGradientBrush

và RadialGradientBrush

III.2.1 : LinearGradientBrush :

Dùng để vẽ một khu vực với một dải nghiêng.Bạn chỉ ra màu sắc cho dải

nghiêng và vị trí dọc theo trục nghiêng thông qua việc sử dụng đối tượng

Gradientstop

Ví dụ sử dụng dải nghiêng 4 màu và sử dụng nó để vẽ hình chữ nhật

Hình 2 7: LinearGradientBrush

III.2.2 RadialGradientBrush

Vẽ một gradient dọc theo một đường tròn,mặc nhiên tâm đường tròn này sẽ nằm giữa vùng được vẽ màu sắc của nó tia ra ngoài từ gốc ra

Đề tài:Tìm hiểu về xử lý đồ họa trong Silverlight GVHD:Th.S:Võ Đức Hoàng

SVTH:Lã Xuân Tâm,Lớp 11TLT 6

Hình 2 8: RadialGradientBrush III.2.3 ImagesBrush

Images Brush cho phép sử dụng hình ảnh để fill,để xét làm background,và viền ngoài.Images brush sử dụng các hình ảnh định dạng JPEG hoặc PNG và được dùng qua thuộc tính images source(đường dẫn ảnh).bạn có thể dùng thuộc tính Stretch với những thuộc tính:None,Uniform,Uniform To fill để kiểm soát bút vẽ.dưới đây là

ví dụ dùng 2 đối tượng imagesbrush với các giá trị khác nhau để vẽ hai đối tượng Rectangle

Hình 2 9:Image Brush

IV Các Thuộc tính đồ họa chung:

Có 1 số thuộc tính đồ họa được áp dụng chung cho tất cả các đối tượng

Silverlight(UIElement):Canvas,các hình họa,MediaElement và TextBlock

IV.1 Thuộc Tính Opacity:

Cho phép kiểm soát độ trong suốt của một đối tượng UIElement.Bạn có thể

đặt giá trị cho thuộc tính từ 0 đến 1.Đối tượng càng trong suốt nếu giá trị càng gần

về 0,nếu đặt 0 thì đối tượng hoàn toàn trong suốt,giá trị mặc định của thuộc tính này

là 1.0

Ví dụ 2 hình họa với 1 thuộc tính Opacity lần lượt là 1.0 và 0.6 như sau:

Hình 2 10:Opacity

IV.2 Thuộc tính Opacity Mask:

Cho phép kiểm soát độ trong suốt các thành phần khác nhau của một đối

tượng UIElement.Bạn có thể dùng OpacityMask để làm cho đối tượng mờ dần từ

Đề tài:Tìm hiểu về xử lý đồ họa trong Silverlight GVHD:Th.S:Võ Đức Hoàng

SVTH:Lã Xuân Tâm,Lớp 11TLT 8

Brush.Bạn có thể dùng bất kỳ kiểu bút vẽ nào để dùng OpacityMask,tuy nhiên

thường dùng nhất là LinearGradientBrush,RadialGradientBrush và

ImagesBrush

Ví dụ dùng LinearGradientBrush trong suốt để vẽ vào 1 đối tượng Rectangle

Hình 2 11: Opacity Mask

IV.3 Thuộc Tính Clip

Cho phép vẽ các phần của một đối tượng một cách chọn lọc.Để dùng thuộc tính Clip,bạn phải cung cấp 1 đối tượng Geometry(đối tượng hình học) để mô tả phần bạn muốn vẽ.Tất cả những phần nằm bên ngoài hình này sẽ bị ẩn(bị xén) đi

Ví dụ dùng RectangleGeometry để mô tả vùng bị xén cho một đối tượng Ellipse.Những phần nào bên trong vùng được định nghĩa b i RectangleGeometry được hiển thị,phần còn lại bị xén

Hình 2 12: Clip

IV.4 Thuộc Tính RenderTransform

Cho phép dùng đối tượng Transform để quay(rotate),làm xiên(skew),đổi tỷ lệ(scale) hoặc dịch chuyển(Transform) 1 đối tượng.Có các loại đối tượng Transform như sau:

 RotateTransform: Quay đối tượng theo 1 góc nào đó

 SkewTransform : Làm xiên đối tượng b i 1 khoảng theo chiều X

hoặc Y

 ScaleTransform :Phóng to thu nhỏ đối tượng theo chiều cao chiều

rộng

 TransleTransform: Dịch chuyển đối tượng theo chiều dọc hoặc

chiều ngang

 TransformGroup: áp dụng nhiều phép biến hình lên 1 đối tượng

Ví dụ biểu diễn các đối tượng Transform khác nhau bằng cách áp dụng chúng lên các đối tượng Rectangle khác nhau

Hình 2 13: RenderTransform

Đề tài:Tìm hiểu về xử lý đồ họa trong Silverlight GVHD:Th.S:Võ Đức Hoàng

SVTH:Lã Xuân Tâm,Lớp 11TLT 10

Chương 3 : Kết Luận

Silverlight là sản phẩm của Microsoft hỗ trợ đa nền tảng có thể chạy trên windows,Linux,MacOS

Silverlight có thể hoạt động trên nhiều môi trường khác nhau như

Web,Desktop,và cả thiết bị di động

 Tính bảo mật và độ tin cậy được nâng cao

 Khả năng hỗ trợ phương tiện và video được nâng cao, bao gồm hỗ trợ video

 Khả năng chạy các ứng dụng Silverlight bên ngoài trình duyệt

 Đồ hoạ, hiệu năng đồ hoạ và các hiệu ứng sáng tạo được cải tiến đáng kể, bao gồm hỗ trợ đồ hoạ Phối cảnh 3D

 Năng suất phát triển được nâng cao cho các ứng dụng Internet đa phương tiện (RIA)

Silverlight phiên bản sau tương thích ngược với các ứng dụng Web được cài sẵn các phiên bản Silverlight trước

Tuy vậy nó vẫn phải đang cạnh tranh mạnh mẽ với các đối thủ như Flash và HTML5.Silverlight vẫn là một công nghệ hứa hẹn và đầy hấp dẫn

Bào cáo của em nghiên cứu về xử lý đồ họa trong Silverlight,nó chỉ là một phần nhỏ trong gói công cụ silverlight,do đó để nghiên cứu sâu hơn chúng ta còn phải tìm hiểu thêm nhiều khía cạnh nữa

TÀI LIỆU THAM KHẢO

[1] Microsoft Vietnam LLC – DPE team.Công nghệ silverlight và ứng dụng

[2].Trang web : http://blogs.msdn.com

[3].Trang web : http://silverlightvn.net

[4].Trang web : http://msdnvietnam.net

[5].Trang web : http://www.microsoft.com/silverlight/