2010-09-15 53 views
8

Tôi đang rối tung xung quanh với Windows Phone 7 sdk và tôi đang cố gắng làm cho màn hình trông giống như một màn hình hiển thị kỹ thuật số thời trang cũ. Ngay bây giờ tôi đang cố gắng tìm ra cách làm cho văn bản "phát sáng" như một trong những đồng hồ kỹ thuật số tuyệt vời đó. Đây là loại điều tôi muốn giả sử bạn sẽ nhìn vào sử dụng shaders cho, nhưng có vẻ như là shaders bị vô hiệu hóa để sử dụng trên Windows Phone 7 OS. Bất kỳ ý tưởng? Để cụ thể hơn, tôi muốn văn bản trông như thể đó là nguồn sáng và có màu "chảy máu" ra một chút so với phông chữ thực tế.Cách tốt nhất để có được hiệu ứng ánh sáng cửa sổ điện thoại 7

+2

được gắn thẻ lại thành đèn bạc và C# thay vì phiên bản 4.0 của các phiên bản đó. winphone7 không sử dụng Silverlight 4, phiên bản 3.custom của Silverlight. –

+1

Nhúng nó vào một số Ready Brek :) –

Trả lời

12

Tôi muốn nói sự lựa chọn giữa việc sử dụng hình ảnh làm phông chữ hoặc làm mờ bằng WriteableBitmap.

Sử dụng hình ảnh phông chữ được tạo sẵn cho phép bạn tạo các chữ cái phức tạp như bạn muốn và sẽ hoạt động tốt. SpriteFont2 thuận tiện vì nó có thể tạo ra SpriteSheet với các hiệu ứng như phát sáng, đột quỵ, đổ bóng và xuất tệp xml chứa các vị trí chữ cái. Thêm tệp png và xml được tạo vào giải pháp của bạn và thay đổi Hành động Xây dựng thành nội dung cũng kiểm tra bạn đã tham chiếu System.Xml.Linq.

Lớp sau có thể được sử dụng.

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

Cách sử dụng

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

Nếu bạn muốn làm mờ nhìn thấy một thi BoxBlur here hoặc sử dụng WriteableBitmapEx.Convolute.

+0

Cảm ơn! Sử dụng SpriteFont2 là một gợi ý tuyệt vời. – CoderDennis

0

Bạn nên tạo một bản sao của TextBlock mà bạn muốn cung cấp ánh sáng. Liên kết thuộc tính văn bản của mục mới với thuộc tính văn bản của mục gốc (sử dụng liên kết ElementName). Làm tương tự cho vị trí/chiều cao/chiều rộng vv hoặc bất kỳ tài sản nào khác mà bạn cảm thấy sẽ thay đổi trên mục gốc. Đặt độ trong suốt trên mục mới cũng như Hiệu ứng mờ. Điều này sẽ cung cấp cho bạn một hiệu ứng ánh sáng mát mẻ mà bạn muốn.

+1

Như đã lưu ý trong các nhận xét về câu trả lời khác cho câu hỏi này, Hiệu ứng đã bị xóa và không còn được hỗ trợ trong WP7 nữa. – CoderDennis

+0

cách suy nghĩ đã dẫn tôi đến một giải pháp, cảm ơn – CuiPengFei

0

Một số cách

Using a Border for a Glow Effect in Silverlight 3

Creating a Glowing effect in Silverlight

Glow effect in Silverlight

Tôi tin rằng tất cả chúng có thể được sử dụng trong WP7 là tốt.

+0

Đầu tiên 2 là hiệu ứng ánh sáng trên hình dạng. Có vẻ như sẽ khó khăn để làm một công việc nội trú trên các ký tự phông chữ. Các liên kết nguồn và demo trực tiếp trong bài viết thứ 3 của bạn bị hỏng. – CoderDennis

Các vấn đề liên quan