Silverlight 1.0 中文字显示解决方案

2007-11-01 15:12:47  来源:msdn中国 奚江华

WebjxCom提示:虽然 Silverlight 本身具备极为优越的 2D 向量文字、绘图与影音能力,但是若缺乏中文字显示的支援能力,对亚洲国家的使用者、程式设计人员乃至于企业端都会造成很大的困扰,故本文将针对如何让 Silverlight 可以正确 显示中文字型 而提供数种解决方案,然而这几种中文

  程式说明:

  在 TextBlock 中指定中文字没有什么特别的地方,设定方式与英文字相同。

  但是有个比较特别的地方是需要额外指定 Downloader 的载入程式,而就是在 Canvas 或 TextBlock 的 Loaded 事件中指定 JavaScript 事件,呼叫 Downloader 执行非同步的字型档载入

  Step 3:建立 Downloader 下载程式

  请在 TextBlockDownloaderTTF.xaml.js 程式中建立 Downloader 相关程式:

  TextBlockDownloaderTTF.xaml.js

以下是引用片段:
  var delegate1;
  var delegate2;
  // Loaded 事件处理常式。
  function handleLoad(sender, eventArgs)
  {
  // 取得Silverlight Plugin物件
  var slPlugin = sender.getHost();
  // 建立Downloader 物件
  var downloader = slPlugin.createObject("downloader");
  // 建立DownloadProgressChanged与Completed 事件委派
  delegate1= downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
  delegate2= downloader.addEventListener("completed", onCompleted);
  // 初始化下载要求
  downloader.open("GET", "Fonts/Kaiu.zip");
  //下载未压缩的TTF字型也可以
  //downloader.open("GET", "Fonts/Kaiu.ttf");
  // 开始传送下载
  downloader.send();
  }
  // Completed 事件处理常式
  function onCompleted(sender, eventArgs)
  {
  // 移除DownloadProgressChanged 事件与其事件处理常式的委派关係
  sender.removeEventListener("downloadProgressChanged", delegate1);
  // 移除Completed 事件与其事件处理常式的委派关係
  sender.removeEventListener("completed", delegate2);
  var textblock = sender.findName("myTextBlock");
  textblock.setFontSource(sender);
  textblock.fontFamily="DFKai-SB";
  //将Downloader物件设定为null
  sender = null;
  }
  // 负责更新进度列
  function onDownloadProgressChanged(sender, eventArgs)
  {
  var progressText = sender.findName("progressText");
  var progressRectangle = sender.findName("progressRectangle");
  // 计算下载的百分比
  var percentage = Math.floor(sender.downloadProgress * 100);
  // 更新进度列的Rectangle 与TextBlock 物件
  progressText.text = percentage + "%";
  progressRectangle.width = percentage * 2;
  }

  程式说明:

  onCompleted 事件是用来下载字型档,它是本程式最重要的核心,而 onDownloadProgressChanged 是用来显示下载进度的百分比,不过是为了人性化,实质上可有可无。完成后请执行 TextBlockDownloaderTTF.html 程式,执行画面如下图。

Silverlight 1.0 中文字显示解决方案_网页教学网webjx.com转载 

图 7 TextBlock 显示 TTF 完整字型档

  范例四 以 Downloader 下载部分嵌入字型档 ODTTF 供 TextBlock 使用

  在前面介绍过 Glyphs 使用部分嵌入字型档 ODTTF,ODTTF 字型档的优点是所需的档案大小可以减少为原来的好几倍,而 ODTTF 不止 Glyphs 可以使用,同样的 TextBlock 也可以使用,只要透过 Downloader 下载 ODTTF 即可,请参考以下的步骤说明:

  Step 1:製作部分嵌入字型档 ODTTF

  在此製作一个“01026A73-2351-5325-5665-E8572E1A1805.odttf”的正黑体字型档,里面所包含的文字为:“千山鸟飞绝,万径人踪灭,孤舟簑笠翁,独钓寒江雪”,并将其档压缩成 EmbededChinese.zip,借此将 ODTTF 字型档由原来的 1,015KB 进一步压缩到 22KB 而已,这是一个更为惊人的方式,因为可以在 Internet 以极高的速度下载传送。

  Step 2:建立 XAML 程式主体

  请参考 TextBlockDownloaderODTTF.xaml 的程式主体,以下为 XAML 程式码:

  TextBlockDownloaderODTTF.xaml

以下是引用片段:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <!-- 進度列指示器 -->
    <Canvas x:Name="ProgressIndicator" Canvas.Left="10" 
       Canvas.Top="10" Canvas.ZIndex="1">
        <Rectangle x:Name="progressRectangle"
          Canvas.Left="10"
          Height="10" Width="0"
          Fill="Maroon" />
        <Rectangle
          Canvas.Top ="-1"
          Canvas.Left="9" Height="12"
          Width="202"
          StrokeThickness="1" Stroke="Black" />
        <TextBlock
          x:Name="progressText"
          Canvas.Top ="-4" Canvas.Left="230"
          Text="0%" FontSize="12" />
    </Canvas>
    
    <Canvas Name="myCanvas" Background="LightBlue" Width="600" 
       Height="400" Canvas.Top="0"  Canvas.ZIndex="0" >
          <TextBlock Name="myTextBlock" 
            TextWrapping="NoWrap"  Width="300" FontSize="30" 
            Canvas.Top="100" Canvas.Left="100" Loaded="handleLoad">
            千山鳥飛絕
            萬徑人蹤滅
            孤舟簑笠翁
            獨釣寒江雪
            <TextBlock.RenderTransform>
                <RotateTransform Angle="30" CenterX="150"
                  CenterY="150"/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>
</Canvas>

更多