Tìm hiểu về xử lý đồ họa trong Silverlight

ĐẠ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 LỚP : 11TLT GVHD : ThS. Võ Đức Hoàng Đà Nẵng, 11/2011 LỜI MỞ ĐẦU 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 Đề 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 1 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ừ WPF(Windows Presentation Foundation) có trong Microsoft .NET. 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 Đề 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 3 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. Đề 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 5 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. Đề 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 7 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ừ trái qua phải hoặc ngược lại.Thuộc tính OpacityMask nhận vào 1 đối tượng Đề 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. Đề 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 9 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: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 11 TÀI LIỆU THAM KHẢO [1]. Microsoft Vietnam LLC – DPE team.Công nghệ silverlight và ứng dụng. [2].Trang web : [3].Trang web : [4].Trang web : [5].Trang web :