程式说明: 在 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.f;
//将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程式,执行画面如下图。

图 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" p
以下是引用片段:
<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%" F />
</Canvas>
<Canvas Name="myCanvas" Background="LightBlue" Width="600"
Height="400" Canvas.Top="0" Canvas.ZIndex="0" >
<TextBlock Name="myTextBlock"
TextWrapping="NoWrap" Width="300" F
Canvas.Top="100" Canvas.Left="100" Loaded="handleLoad">
千山鳥飛絕
萬徑人蹤滅
孤舟簑笠翁
獨釣寒江雪
<TextBlock.RenderTransform>
<RotateTransform Angle="30" CenterX="150"
CenterY="150"/>
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Canvas>