我正在研究Windows Phone 7 sdk，并尝试使屏幕看起来像一个老式的数字显示器。现在我正在尝试弄清楚如何使文本像那些酷炫的数字时钟一样“发光”。我认为这是使用着色器来实现的，但似乎Windows Phone 7操作系统禁用了着色器的使用。有什么想法吗？更具体地说，我希望文本看起来像是一个光源，并且颜色从实际字体中略微“渗出”。
如何在Windows Phone 7上实现最佳的发光效果
8
- brandon
1
2重新标记为Silverlight和C#，而不是它们的4.0版本。Winphone7不使用Silverlight 4，而是使用Silverlight的3.自定义版本。 - John Gardner
3个回答
12
我会说这是在使用图像作为字体或者使用WriteableBitmap进行模糊处理之间做出的选择。
使用预制字体图像可以让你将字母做得越复杂越好，并且性能应该很好。 SpriteFont2 很方便，因为它可以生成带有发光、描边、阴影等效果的 SpriteSheet，并导出一个包含字母位置的 xml 文件。 将生成的 png 和 xml 文件添加到你的解决方案中，并将 Build Action 更改为 content，还要检查你是否已经引用了 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方法。
- Kris
1
谢谢！使用SpriteFont2是一个很好的建议。 - CoderDennis
0
- Evgeny Vinnik
1
前两个是形状的发光效果。似乎很难让边框在字体字符上起作用。你第三篇文章中的实时演示和源链接已经失效。 - CoderDennis
0
你应该复制想要发光的TextBlock。将新项的文本属性绑定到原始项的文本属性（使用ElementName绑定）。对于位置/高度/宽度等任何其他您认为会在原始项上更改的属性也是如此。在新项目上设置透明度以及模糊效果。这将为您提供所需的酷炫发光效果。
- basarat
1
1正如在回答此问题的其他答案中所指出的评论中，Effects已被移除，并且在WP7中不再受支持。 - CoderDennis
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接