Silverlight Tip of the Day #7: Creating Transparent PNG files for Silverlight

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:24:01 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:24:01 AM

Với những file ảnh đuôi GIF( không được hỗ trợ trong Silverlight 2), để làm cho ảnh trở trên trong suốt (transparency) hoàn toàn rất dễ dàng bởi vì bạn chỉ cần chỉ rõ màu nào trong hình đuôi GIF đó mà bạn muốn nó trong suốt. Nhưng với hình ảnh đuôi PNG, điều đó có khó hơn chút xíu. Bạn sẽ phải sử dụng một công cụ chỉnh sửa để làm sạch (clear) hết những vùng bên ngoài mà bạn không muốn nó hiển thị ra. Có một công cụ để làm điều này, và tôi sẽ chỉ cho các bạn làm điều đó.

Bước 1. Tìm một công cụ chỉnh sửa hỗ trợ định dạng file GIF và sử dụng công cụ "Magic Wand" để làm sạch những vùng không cần thiết. Mở file ảnh mà bạn muốn chỉnh sửa trong công cụ mà bạn đã chọn. Đối với ví dụ này, chúng ta sẽ sử dụng hình ảnh của thầy phù thủy nhỏ dễ thương như hình 7.1.

Hình 7.1 Attacking Mage

Bước 2. Click vào nút "Magic Want" trên thanh toolbar. Nếu bạn sử dụng công cụ là Photoshop,đầu tiê hãy nhấp đôi vào layer để xóa đi layer background gốc. Phương pháp này sẽ làm cho màu nền ảnh (background) được trong suốt và không có màu trắng. Nếu được, hãy gán Tolerance level = 0 để nó chỉ chọn vùng màu nâu thôi. Và nếu được, hãy tắt Anti-Alias.

Bước 3. Clich chuột trái lên vùng màu nâu như hình 7.2 ( tức là sau khi bạn chọn magic want trên thanh công cụ thì chỉ cần bạn click vào vùng mầu nâu trên hình) và bạn sẽ thấy tất cả những vùng màu nâu được chọn.

Hình 7.2 Ranh giới được chọn trên hình

Bước 4. Nhấn phím delete trên bàn phím. Kết quả background của hình được xóa như hình 7.3.

Hình 7.3 Background đã được xóa.

Bước 5. Lưu lại hình đã xóa background với định dạng đuôi PNG. Hình này bây giờ sẽ được hiển thị trong Silverlight như là một hình trong suốt ở những khu vực mà bạn đã cắt bên ngoài hình phù thủy nhỏ dễ thương. Dưới đây là một ví dụ để biết được phải làm sao để loadvà hiển thị file ảnh đuôi PNG. Chúng ta gọi phương thức này là LoadImage() và hơn nữa là ta sẽ thêm image resource vào một Canvas có tên là MapCanvas.

public void DisplayPNG()
{
    Image img = LoadImage("images/mage.png");
    MapCanvas.Children.Add(img);
}
 
public Image LoadImage(string resource)
{
    Image img = new Image();
    Uri uri = new Uri(resource, UriKind.Relative);
    ImageSource imgSrc = new System.Windows.Media.Imaging.BitmapImage(uri);
    img.SetValue(Image.SourceProperty, imgSrc);
    return img;
}

Credits: Chân thành cám ơn trang web http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) về những hình ảnh này.

Thank you,
--Mike Snow