Silverlight Tips of the Day 系列翻译与领悟#7

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

对于Silverlight2不支持的GIF而言，透明处理是非常容易的，因为你只需要指定哪种颜色作为你的透明色即可。对于PNG则有点困难。你需要使用编辑工具把你不希望显示的区域清除掉。有一些工具可以做这样的事情，现在我将带你们做一下。

（这篇属于美工的活。。。不翻译了。。。）

Step 1. Find a image editing tool that supports PNG file format and a feature like the "Magic Wand" that is used to clear selected areas. Open the image you want to edit in that tool. For our example, we will use this cute little attacking mage as seen in Figure 7.1.

Figure 7.1 Attacking Mage

Step 2. Click the "magic wand" button on the toolbar. If you are using a tool like Photoshop, first duplicate the layer and delete the original background layer. This way the background you clear away is transparent and not white. If available, set the Tolerance level = 0 so that it only grabs the brown color. Also, if available, turn off Anti-Alias.

Step 3. Left click on the brown surface as seen in Figure 7.2 (plus left shift click to grab the brown piece under his cloak) and you will see that everything in brown is selected.

 
Figure 7.2 Image Boundaries Selected

Step 4. Hit the delete key. The result is the background is now erased as seen in Figure 7.3.

Figure 7.3 Background Erased.

Step 5. Save the file as a PNG file. This image will now render in Silverlight as transparent through the spaces that you cut out of the image. Below is an example on how to load and display and PNG image. We call our routine LoadImage() and than add the image resource to a Canvas control I have named 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: Thanks to the site http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) for these images.

原文链接