使用会标字体的面料文字在画布上无法正确呈现

Question

我目前正在制作一个项目，在该项目中，我使用面料js创建画布以向用户展示他们的首字母缩写在会标风格图像中的样子。问题是画布不能正确渲染文字。

渲染的文字是这样的：

pls click this link

，但是当我在图像中的任意位置单击将其固定。它应该是这样的：

pls click this link

我创建这样的画布：

公共职能print_form_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; 
} 

我使用字体面属性加载字体。我究竟做错了什么？

Answer 1

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