当前位置：网站首页 >> 网络编程 >> 其他WEB语言 >> 文章内容

Silverlight 1.0 中文字显示解决方案

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

　　程式说明：

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

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

　　Step 3：建立 Downloader 下载程式

　　请在 TextBlockDownloaderTTF.xaml.js 程式中建立 Downloader 相关程式：网页教学网

　　TextBlockDownloaderTTF.xaml.js

Webjx.Com

以下是引用片段：
　　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;
　　}

　　程式说明： Webjx.Com

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

图 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 程式主体

Webjx.Com

　　请参考 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">
            千山鳥飛絕

Webjx.Com

            萬徑人蹤滅
            孤舟簑笠翁
            獨釣寒江雪
            <TextBlock.RenderTransform>
                <RotateTransform Angle="30" CenterX="150"
                  CenterY="150"/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>
</Canvas>