开发者

Best way to get a glow effect windows phone 7

开发者 https://www.devze.com 2023-01-16 12:10 出处:网络
I\'m messing around with the Windows Phone 7 sdk and I\'m 开发者_如何学Pythontrying to make the screen look like an old fashion digital display. Right now I\'m trying to figure out how to make the tex

I'm messing around with the Windows Phone 7 sdk and I'm 开发者_如何学Pythontrying to make the screen look like an old fashion digital display. Right now I'm trying to figure out how to make the text "glow" like one of those cool digital clocks. This is the sort of thing I'd assume you would look in to using shaders for, but it seems that shaders are disabled for use on the Windows Phone 7 OS. Any ideas? To be more specific, I want the text to look as though it is a light source and have the color "bleed" out slightly from the actual font.


I'd say its a choice between using an image as a font or blurring with WriteableBitmap.

Using a pre-made font image allows you to make the letters a complex as you want and should perform well. SpriteFont2 is convenient as it can generate the SpriteSheet with effects like glow, stroke, shadow and export an xml file containing the letter positions. Add the generated png, and xml files to your solution and change the Build Action to content also check you have referenced System.Xml.Linq.

The following class can then be used.

public static class BitmapFont
{
    private class FontInfo
    {
        public FontInfo(WriteableBitmap image, Dictionary<char, Rect> metrics)
        {
            this.Image = image;
            this.Metrics = metrics;
        }
        public WriteableBitmap Image { get; private set; }
        public Dictionary<char, Rect> Metrics { get; private set; }
    }

    private static Dictionary<string, FontInfo> fonts = new Dictionary<string, FontInfo>();
    public static void RegisterFont(string fontFile, string fontMetricsFile)
    {
        string name = System.IO.Path.GetFileNameWithoutExtension(fontFile);
        BitmapImage image = new BitmapImage();

        image.SetSource(App.GetResourceStream(new Uri(fontFile,UriKind.Relative)).Stream);
        var metrics = XDocument.Load(fontMetricsFile);
        var dict = (from c in metrics.Root.Elements()
                    let key = (char)((int)c.Attribute("key"))
                    let rect = new Rect((int)c.Element("x"), (int)c.Element("y"), (int)c.Element("width"), (int)c.Element("height"))
                    select new { Char = key, Metrics = rect }).ToDictionary(x => x.Char, x => x.Metrics);

        fonts.Add(name,new FontInfo(new WriteableBitmap(image),dict));
    }

    public static WriteableBitmap DrawFont(string text, string fontName)
    {
        var font = fonts[fontName];

        var letters = text.Select(x => font.Metrics[x]).ToArray();
        var height = (int)letters.Max(x => x.Height);
        var width = (int)letters.Sum(x => x.Width);

        WriteableBitmap bmp = new WriteableBitmap(width, height);

        int[] source = font.Image.Pixels, dest = bmp.Pixels;
        int sourceWidth = font.Image.PixelWidth;
        int destX = 0;
        foreach (var letter in letters)
        {
            for (int sourceY = (int)letter.Y, destY = 0; destY < letter.Height; sourceY++, destY++)
            {
                Array.Copy(source, (sourceY * sourceWidth) + (int)letter.X, dest, (destY * width) + destX, (int)letter.Width);
            }
            destX += (int)letter.Width;
        }

        return bmp;
    }

    public static Rectangle[] GetElements(string text, string fontName)
    {
        var font = fonts[fontName];

        return (from c in text
                let r = font.Metrics[c]
                select new Rectangle
                {
                    Width = r.Width,
                    Height = r.Height,

                    Fill = new ImageBrush { 
                        ImageSource = font.Image, 
                        AlignmentX=AlignmentX.Left,
                        AlignmentY=AlignmentY.Top,
                        Transform = new TranslateTransform { X = -r.X, Y = -r.Y },
                        Stretch=Stretch.None                        
                    },
                }).ToArray();
    }
}

Usage

//Register the font once.
BitmapFont.RegisterFont("Font.png", "Metrics.xml");

//Draws the text to a new bitmap, font name is image name without extension.
image.Source = BitmapFont.DrawFont(DateTime.Now.ToLongTimeString(), "Font");

//Alternatively put these elements in a horizontal StackPanel, or ItemsControl
//This doesn't create any new bitmaps and should be more efficient.
//You could alter the method to transform each letter too.
BitmapFont.GetElements(DateTime.Now.ToLongTimeString(), "Font");

If you want to blur see a BoxBlur implementation here or use WriteableBitmapEx.Convolute.


You should make a copy of the TextBlock you want to give the glow to. Bind the text property of the new item to the original item's text property (using ElementName binding). Do the same for location / height / width etc or any other property that you feel that will change on the original item. Set a transparency on the new item as well as a Blur Effect. This will give you a cool glow effect you want.


Several ways

Using a Border for a Glow Effect in Silverlight 3

Creating a Glowing effect in Silverlight

Glow effect in Silverlight

I believe all of them can be used in WP7 as well.

0

精彩评论

暂无评论...
验证码 换一张
取 消