获得辉光效果 Windows Phone 7 的最佳方式 [英] Best way to get a glow effect windows phone 7

问题描述

我正在使用 Windows Phone 7 sdk，我试图让屏幕看起来像一个老式的数字显示器.现在我正试图弄清楚如何让文本发光"，就像那些很酷的数字时钟之一.这是我假设您会考虑使用着色器的那种事情，但似乎着色器在 Windows Phone 7 操作系统上被禁用.有任何想法吗?更具体地说，我希望文本看起来像是一个光源，并且颜色从实际字体中略微渗出".

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 文件包含字母位置.将生成的 png 和 xml 文件添加到您的解决方案，并将构建操作更改为内容，同时检查您是否引用了 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.

然后可以使用以下类.

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();
    }
}

用法

//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屋！