使用会标字体的织物文本无法在画布上正确呈现

Question

我目前正在做一个项目，我使用织物 js 创建一个画布，以向用户展示他们的姓名首字母在字母组合样式图像中的样子。问题是画布无法正确呈现文本。

呈现的文本如下所示：

pls click this link

但是当我单击图像中的任意位置时，将被修复。它应该是这样的：

pls click this link

我这样创建画布：

公共函数 print_form_initials($initials) {

    if($initials) {
        $left_letter    = strtolower(substr($initials, 0, 1));
        $center_letter  = strtoupper(substr($initials, 1, 1));
        $right_letter   =  $this->substitute_circle_monog_third_char(substr($initials, 2, 1));
        $val = $left_letter . $center_letter . $right_letter;
    } else {
        $val = 'rE4';
    }

    $html =     '<canvas id="canvas" width="130" height="130"></canvas>';
    $html .=    '<script type="text/javascript">';
    $html .=    'jQuery(window).load(function(){';
    $html .=    'var canvas = new fabric.Canvas("canvas");';
    $html .=    'var text = new fabric.Text("' . $val . '", {';
    $html .=    'fontFamily     : "circle-monogram",';
    // $html .= 'fontSize    : 100,';
    // $html .= 'selectable     : false,';
    // $html .= 'top        : 3,';
    // $html .= 'left       : 3';
    $html .=    '});';
    $html .=    'canvas.add(text);';
    $html .=    '})';
    $html .=    '</script>';

    // output the html

    return $html;
}

我使用 font-face 属性加载字体。我做错了什么？

Answer 1

问题在于，当您创建画布时，尚未加载字体。 使用带有回调的字体加载器或使用一些延迟技术在 1 或 2 秒后再次渲染画布。