Bài giảng Mạng Silverlight - Chương 5: Xử lý đồ họa trên Silverlight

Nội dung text: Bài giảng Mạng Silverlight - Chương 5: Xử lý đồ họa trên Silverlight

1. CHƢƠNG V: XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 1 Giới thiệu 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 của bạn. 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 điṇ h bở i daṇ g hình thì có thể tô hiêụ ƣ́ ng , nhƣ là ả nh , dải màu, hoăc̣ là đoaṇ video , thông qua viêc̣ sƣ̉ duṇ g Brush. Silverlight kế thƣ̀ a môṭ thƣ viêṇ đồ hoạ khá đầ y đủ tƣ̀ WPF bở i vâỵ sẽ không quá khó khăn để môṭ lâp̣ trình viên đã quen vớ i WPF chuyể n qua là m viêc̣ vớ i Silverlight. Dƣớ i đây chú ng ta sẽ lầ n lƣợt là m quen vớ i cá c đố i tƣợng đồ hoạ nhƣ Ellipse, Line, Path, Polygon, Geometries, Brushes 2 Shapes and Drawing Trong Silverlight, Shape là kiể u UIElement nên baṇ có thể dễ dà ng hiể n thi ̣môṭ đố i tƣợng daṇ g Shape lên mà n hình . Bở i vì chú ng là nhƣ̃ ng thà nh phầ n đồ hoạ nên nhƣ̃ ng đố i tƣợng Shape này có thể đi kèm với những container nhƣ Grid và Canvas. Silverlight cung cấ p nhƣ̃ ng dạng hình(Shape) mà bạn có thể dùng ngay đƣợc nhƣ Ellipse, Line, Path, Polygon, Polyline, và Rectangle. Nhƣ̃ ng Shape đều có chung những đặc tính dƣới đây: - Stroke: dùng để vẽ viền ngoài của Shape. - StrokeThickness: đô ̣ dà y củ a viề n ngoà i củ a Shape. - Fill: Mô tả cá ch phía bên trong củ a Shape đƣợc vẽ. - Đặc tính Data chỉ rõ tọa độ và các đỉnh đƣợc điṇ h nghiã tùy theo thông tin đầ u và o Nhƣ̃ ng đố i tƣợng Shape có thể dùng bên trong Canvas. Canvas hỗ trợ chi ̉ ra vi ̣trí tuyêṭ đố i của đối tƣợng con bên trong thông qua đặc tính đính kèm là Canvas.Left và Canvas.Top 2.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) nhƣ ví du ̣ minh hoạ dƣớ i đây. Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 1
2. 2.2 Line Cho phé p baṇ vẽ môṭ đoaṇ thẳ ng giƣ̃ a hai điể m . Ví dụ dƣới đây chỉ ra một số cách để bạn xác định tọa độ của đoạn thẳng và đặc tính Stroke của nó. 2.3 Path Lớ p Path cho phé p baṇ vẽ những hình cong và những daṇ g hình phức tap̣ . Những hình cong và daṇ g hinh (shape) đƣợc diễn tả thông qua viêc̣ s ử dụng đối t ƣợng Geometry. Để sử dụng Path, bạn tạo một Geometry và dùng nó để xét cho đặc tính Data của đối tƣợng Path. Có nhiều loại đối t ƣợng Geometry khá c nhau để baṇ choṇ : LineGeometry, RectangleGeometry, và EllipseGeometry có liên quan t ới những daṇ g hình (shape) đơn giản lầ n lƣợt tƣơng ƣ́ ng Line , Rectangle, Ellipse. Để taọ nh ững daṇ g hình ph ức tap̣ hoặc hình trò n chú ng ta s ử dụng PathGeometry. Ví dụ dƣới đây xử dụng cú pháp rút gọn để biểu diễn môṭ dạng hình phức tạp. Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 2
3. 2.4 Polygon Để xá c điṇ h môṭ đa giá c(Polygon) bạn cần cung cấp một danh sách các điểm (Point) và tô mà u cho nó qua đăc̣ tính Fill . Ví dụ dƣới đây vẽ một đa giác với màu viền đỏ tía và bên trong đƣợc đổ mà u xanh. 2.5 Polyline Cũng tƣơng tự nhƣ đối tƣợng Polygon ngoaị trƣ̀ viêc̣ không nhấ t thiế t Polyline phả i khép kín. Bạn cũng có thể nhận đƣợc kết quả tƣơng tự nhƣ Polyline khi vẻ chồng lên nhau nhiề u Line . Chú ý Polyline với một điểm (Point) sẽ không đƣợc hiển thị lên . Ví dụ dƣớ i đây vẽ môṭ Polyline là môṭ hình tam giá c viề n mà u xanh khép kín. 2.6 Rectangle Môṭ hình chƣ̃ nh ật(Rectangle) đƣợc xá c điṇ h bở i hai đăc̣ tính rôṇ g (Width) và cao(Height), để xác định vị trí của Rectangle trong container chúng ta sử dụng thuộc tính Margin hoặc Canvas .Left, Canvas.Top để tù y chin̉ h . Rectangle không hỗ trợ đố i tƣợng con bên trong bở i vâỵ nế u baṇ muố n khu vƣ̣c Rectangle chƣ́ a nhƣ̃ ng đố i tƣợng Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 3
4. khác bạn có thể sử dụng Canvas . Bạn cũng có thể dùng dạng hình hỗn hợp , nhƣng trong trƣờ ng hợp nà y có lẽ baṇ nên sƣ̉ duṇ g RectangleGeometr y hơn là viêc̣ dù ng Rectangle. Ví dụ dƣới đây hiển thị một Rectangle viền màu đỏ và tô màu bên trong màu xanh. 3 Geometries Cung cấ p lớ p cơ sở cho nhƣ̃ ng đố i tƣợng để xá c điṇ h daṇ g hình hoc̣ cho đố i tƣợng . Đối tƣợng Geometry có thể sƣ̉ duṇ g để là m vù ng giao (clipping regions) và cũng nhƣ định nghĩa dữ liệu cho đố i tƣợng Path. 3.1 EllipseGeometry Miêu tả hình daṇ g củ a đƣờ ng trò n hoăc̣ ellipse. FillRule là đặc tính kế thừa từ lớp cơ sở Geometry nhƣng tù y choṇ nà y không có tá c duṇ g đố i vớ i EllipseGeometry. EllipseGeometry chỉ đơn giản định nghĩa hình dạng cho ellipse và không thể tự nó hiển thị đƣợc. Bở i vì nó rấ t đơn giả n và phaṃ vi sƣ̉ duṇ g rôṇ g . Ví dụ dƣới đây vẽ một path sƣ̉ duṇ g dƣ̃ liêụ daṇ g EllipseGeometry 3.2 PathGeometry Miêu tả daṇ g hình ph ức tap̣ có thể gồ m có hình cung , đƣờng cong, ellipse, đoaṇ thẳ ng, và hình chữ nhâṭ . Mỗi PathGeometry xá c điṇ h bởi môṭ danh sá ch đố i tƣợng PathFigure. Mỗi đố i t ƣợng PathFigure bao gồ m môṭ hoăc̣ nhiề u PathSegment , tƣơng tự cũng nhƣ với ArcSegment và LineSegment . Để phủ kín diêṇ tích củ a PathGeometry thì moị đố i Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 4
5. tƣợng PathFigure baṇ phả i xé t thuôc̣ tính IsFilled là "true" và FillRule để xác định khu vực đƣợc fill. 3.3 GeometryGroup Miêu tả môṭ hỗn h ợp hình daṇ g , đƣợc taọ thà nh t ừ nhiề u đố i t ƣợng Geometry khác. Sƣ̉ duṇ g FillRule cho GeometryGroup là rấ t hợp lý bở i sƣ̣ kế t hợp cá c hình dạng có thể có khả năng kết hợp các đoạn nơi mà sự áp dụng của quy luật fill có tá c duṇ g. 4 Brushes Bạn có thể 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. 4.1 Solid Color Môṭ trong nh ững thao tá c chung trong bấ t c ứ nề n tả ng nà o là tô mà u môṭ khu v ực với môṭ mà u đơn sắ c. Để thực hiêṇ viêc̣ nà y, Silverlight cung cấ p lớp SolidColorBrush. Dƣới đây chú ng tôi sẽ chi ̉ ra những cá ch khá c nhau để tô mà u với SolidColorBrush. Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 5
6. Để tô mà u môṭ khu vƣ̣c vớ i mà u đơn trong XAML, sƣ̉ duṇ g theo nhƣ̃ ng tù y choṇ sau: o SolidColorBrush đƣợc điṇ h ngh ĩa trƣớc theo tên . Ví dụ dƣới đây dùng SolidColorBrush để xé t thuôc̣ tính Fill củ a hình chƣ̃ nhâṭ (Rectangle). o Chọn từ bảng màu 32-bit vớ i điṇ h daṇ g #rrggbb vớ i rr, gg, bb lầ n lƣợt là 2 số mã 16 cho cá c mà u đỏ , xanh lá , xanh lơ. Mở rôṇ g thêm baṇ có thể xé t vớ i điṇ h daṇ g nhƣ sau: #aarrggbb vớ i r, g, b ý nghiã nhƣ trên và aa ở đây chi ̉ giá tri ̣alpha hoăc̣ là độ trong suốt. o Sƣ̉ duṇ g thuôc̣ tính kiể u phầ n tƣ̉ để mô tả SolidColorBrush ( ở đây là thuộc tính Fill) 4.2 Gradient Gradient brush vẽ một khu vực với nhiề u mà u sắ c pha trôṇ và o nhau doc̣ theo môṭ truc̣ . Bạn có thể s ử dụng chúng để tạo ra hiệu ứng á nh sá ng và bó ng , mang laị cho thà nh phầ n đồ hoạ củ a baṇ cả m giá c 3 chiề u. Bạn cũng có thể s ử dụng chúng để mô phỏng kính, chrome, nƣớc, và các bề mặt mịn . Silverlight cung cấ p 2 loại gradient brush là : LinearGradientBrush và RadialGradientBrush. a. Linear Gradients LinearGradientBrush dùng để vẽ một khu vực với môṭ dả i nghiêng. Bạn chỉ ra mà u sắ c cho dả i nghiêng và vi ̣trí doc̣ theo truc̣ nghiêng thông qua viêc̣ s ử dụng đối t ƣợng GradientStop. Bạn cũng có thể chỉnh s ửa truc̣ nghiêng , nó cho phé p baṇ taọ dả i nghiêng theo chiề u doc̣ hoăc̣ ngang và đả o h ƣớng củ a dài nghiêng. Ví dụ d ƣới đây sử dụng dải nghiêng với 4 màu và s ử sụng nó để vẽ lên hình chữ nhâṭ . Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 6
7. b. Radial Gradients Giố ng nhƣ LinearGradientBrush, môṭ RadialGradientBrush vẽ môṭ khu v ực với màu sắc mà pha trộn v ới nhau doc̣ theo môṭ truc̣ . Cách vẽ của RadialGradientBrush dựa theo môṭ truc̣ đƣợc xá c điṇ h b ởi đƣờng trò n; màu sắc của nó tia ra ngoài t ừ phía gốc của nó . Ví dụ dƣới đây vẽ một hình chữ nhật sử dụng RadialGradientBrush để tô màu bên trong. Dƣớ i đây là môṭ và i tù y choṇ khá c nhau giú p baṇ taọ môṭ số kiể u hiêụ ƣ́ ng khá c nhau vớ i RadialGradientBrush: Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 7
8. 4.3 Images Lớp ImageBrush cho phé p baṇ s ử dụng ảnh để fill , để xét làm bacrkground , và viền ngoài. ImageBrush sử dụng đƣợc với những điṇ h daṇ g ả nh JPEG hoăc̣ PNG và đ ƣợc dùng thông qua thuộc tính ImageSource. Bạn có thể cung cấp thông tin ImageSource với đƣờng dẫn củ a ả nh để tả i chú ng. Măc̣ điṇ h ImageBrush sẽ giãn ả nh ra hế t toà n bô ̣ khu v ực đƣợc vẽ, có thẻ ảnh sẽ bị làm méo nếu khu v ực đƣợc vẽ có ti ̉ lê ̣ bề măṭ k hác với ả nh. Bạn có thể thay đổi trạng thái này bằng việc thay đổi thuộc tính Stretch mặ c điṇ h củ a nó t ới môṭ trong nh ững giá tri ̣ sau: None, Uniform, UniformToFill. Ví dụ dƣới đây sử dụng ImageBrush để vẽ nền của môṭ Canvas Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 8
9. 4.4 Video VideoBrush cho phé p baṇ vẽ môṭ khu v ực bằ ng video . Ví dụ d ƣới đây sử dụng VideoBrush để vẽ mà u chữ(Foreground) của TextBlock 4.5 Deep Zoom Deep Zoom cung cấ p khả năng phó ng to thu nhỏ môṭ cá ch tù y ý nh ững ả nh l ớn trong Siliverlight môṭ cá ch hiêụ quả nhấ t . Ảnh có thể hiển thị ở mức rấ t nhỏ và rấ t l ớn mà không ả nh hƣởng tới hiêụ quả hoaṭ đôṇ g củ a ứng duṇ g đang hiể n thi ̣ả nh. Chỉ có thuộc tính làm ảnh h ƣởng tới hiêụ quả hoaṭ đôṇ g đó là đô ̣ phân giả i củ a mà n hình . Để biế t thêm chi tiế t mờ i cá c baṇ tham khả o điạ chi ̉ sau : us/library/cc645050(VS.95).aspx Microsoft Vietnam LLC – DPE team | Chương V: Xử lý đồ họa trên Silverlight 9