获得发光效果的Windows Phone最佳途径7 [英] Best way to get a glow effect windows phone 7

问题描述

我用了Windows Phone 7 SDK乱搞，我试图让画面看起来像一个老的时尚数码显示。现在，我试图找出如何使文本光晕像那些很酷的数字时钟之一。这是诸如此类的事情，我想你会看在使用着色器，但似乎着色器是在Windows Phone 7 OS使用禁用。有任何想法吗？更具体地讲，我想看看文本，就好像它是一个光源和具有实际字体颜色流血出来咯。

I'm messing around with the Windows Phone 7 sdk and I'm trying 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.

推荐答案

我要说其使用图像作为字体或WriteableBitmap的模糊之间做出选择。

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

使用预制的字体图像可以让你使字母一个复杂的，只要你想，应该表现良好。 SpriteFont2 是方便，因为它可以产生像朝霞，中风，阴影效果的SpriteSheet并导出包含字母位置的XML文件。
XML文件添加生成PNG，和你的解决方案，改变生成操作内容也检查所引用的System.Xml.Linq的。

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");

如果你想模糊看到一个BoxBlur实施的这里或使用 WriteableBitmapEx.Convolute 。

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

这篇关于获得发光效果的Windows Phone最佳途径7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！