使用FontDialog

本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"颜色和字体对话框"。

可以在js脚本中使用FontDialog选择字体，同样需要指定一个回调函数用于处理用户选择的字体。

FontDialog使用起来比其他对话框复杂很多，因为字体是一个Font对象，而前端js不能识别更不能使用Font对象。

所以FontDialog返回的是一个json字符串，包括name、size、bold、italic四个键值对，分别表示字体名称、大小、是否粗体、是否斜体。

如果打开FontDialog的时候，希望将默认字体设置为元素的当前字体，这同样需要比较复杂的转换，要根据元素的字体样式生成一个Font对象然后赋值给FontDialog：

// 调用FontDialog设置字体
function callBackendFontDialog() {
    // 提取当前字体样式
    const computedStyle = getComputedStyle(textBox);
    const currentFontFamily = computedStyle.fontFamily.replace(/["']/g, "").trim();
    const currentFontSize = parseFloat(computedStyle.fontSize) / 1.33333;
    const currentFontWeight = computedStyle.fontWeight;
    const currentFontStyle = computedStyle.fontStyle;  

    let fontStyleEnum = ft.FontStyle.Regular;           
    if (currentFontWeight === "bold" || currentFontWeight === "700") {
        fontStyleEnum |= ft.FontStyle.Bold;
    }
    if (currentFontStyle === "italic") {
        fontStyleEnum |= ft.FontStyle.Italic;
    } 

    // 根据当前字体样式生成默认字体
    const defaultFont = ft.Font(currentFontFamily, currentFontSize, fontStyleEnum);
    const fontDialog = ft.FontDialog();
    fontDialog.CallBack = "handleFontCallback"; // 指定回调函数
    fontDialog.Font = defaultFont;
    fontDialog.ShowDialog();
}

// 回调函数，接收后端返回的字体数据，更新文本框样式
function handleFontCallback(fontJsonStr) {
    const fontObj = JSON.parse(fontJsonStr); // 解析传递过来的json数据
    if (!fontObj) return;
   
    // 设置字体
    textBox.style.fontFamily = fontObj.name;
    textBox.style.fontSize = (fontObj.size * 1.33333) + "px";
    textBox.style.fontWeight = fontObj.bold ? "bold" : "normal";
    textBox.style.fontStyle = fontObj.italic ? "italic" : "normal";
}

关于字体大小转换的说明：

代码中的 1.33333 是 磅（Point） 与 像素（Pixel） 之间的换算系数。

磅（pt）：Foxtable 中字体大小的单位，属于物理单位，1 点 = 1/72 英寸。

像素（px）：网页（CSS）中字体大小的单位，属于屏幕显示单位。

在常规的屏幕分辨率（96 DPI）下，1 点 ≈ 1.33333 像素。换算公式为：

像素 = 点 × 96 / 72 = 点 × 1.33333