时间戳

首页 > 解决方案 > 将谷歌字体渲染为 svg 路径路径，但包装为承诺

angular - 将谷歌字体渲染为 svg 路径路径，但包装为承诺

问题描述

我有以下脚本，它执行异步操作。我想把它包装在一个承诺中，但我不确定如何。

  static renderGoogleFontToSvgPath(): Promise<string> {
    const url = 'http://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo18G0wx40QDw.ttf';
    const text = 'hello';
    const size = 14;
    const union = false;
    const bezierAccuracy = 0;
    let svg = null;
    opentype.load(url, (err, font) => {
      const textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy);
      svg = makerjs.exporter.toSVG(textModel);
      // produces code here
      console.log(svg)
    });
    // null
    return svg;
  }

当我在这里调用它时，结果为空。

 ngOnInit(): void {
    const font = BuilderSidebarTextService.renderGoogleFontToSvgPath();
    console.log(font);
 }

如何以兼容 Angular 的方式修复它。

标签： angular

解决方案

到函数返回时，svg变量的值为 null，因为它是在异步函数中设置的。所以你需要返回一个Promise.

 static renderGoogleFontToSvgPath(): Promise<string> {
    const url = 'http://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo18G0wx40QDw.ttf';
    const text = 'hello';
    const size = 14;
    const union = false;
    const bezierAccuracy = 0;
    let svg = null;
    return new Promise(resolve => {
    opentype.load(url, (err, font) => {
      const textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy);
      svg = makerjs.exporter.toSVG(textModel);
      // produces code here
      resolve(svg);
    });
  });
 }

并像下面这样使用它：

async ngOnInit(): void {
    const font = await BuilderSidebarTextService.renderGoogleFontToSvgPath();
    console.log(font);
 }

推荐阅读