使用fabricjs的位图文本

Question

我研究了 HTML5 和 CSS3 中使用的字体。我知道网页字体（如 ttf/otf、eot、woff、woff2）将支持网页。但是，我需要在画布中使用 *.fon 字体（本机应用程序中使用的字体）。

我提到了link，bitmaptext 可以与扩展 fabric.image 一起使用。但是，我需要像 fabricjs 的普通文本对象一样使用位图文本。例如。字体样式、换行、行距、字体更改等

是否可以使用 bitmaptext 或有任何其他方式来呈现 *.fon 文件中的文本？

.fon file converted to bitmap

Answer 1

在这里您可以看到 Textbox 类的基本覆盖。

我添加了处理基本功能所需的所有属性，我将 measureChar 函数存根以返回位图字体的固定宽度 6px。

在初始化时，我创建了一个地图，告诉我位图字体中最常见字符的位置，最后我编写了一个简单的渲染方法来检索它需要的画布部分以绘制该字符。

你仍然需要弄清楚 fontColor、fontSize、doubleWidth 和 doubleHeight，但是既然你有这个例子就应该直截了当

(function() {
  fabric.BitmapText = fabric.util.createClass(fabric.Textbox, {
    type: 'bitmapText',
    bitmap: 'https://i.stack.imgur.com/ITDgw.png',
    readyToRender: false,
    charWidth: 6,
    charHeight: 9,
    fontSize: 9,

    charMap: ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}'
      .split('').reduce(function(acc, char, index) {
        acc[char] = index + 31;
        return acc;
      }, {}),
    initialize: function(text, options) {
      this.callSuper('initialize', text, options);
      var image = fabric.document.createElement('img');
      image.onload = (function() {
        var canvas = fabric.document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        console.log(canvas.width)
        canvas.getContext('2d').drawImage(image, 0, 0);
        this.bitmapResource = canvas;
        this.readyToRender = true;
        this.dirty = true;
        if (this.canvas) this.canvas.requestRenderAll();
      }).bind(this);
      image.src = this.bitmap;
    },

    // override: make it return a fixed box 6x9
    _measureChar: function(_char, charStyle, previousChar, prevCharStyle) {
      return { width: 6, kernedWidth: 6 };
    },

    _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
      if (!this.readyToRender) return;
      var charMap = this.charMap, res = this.bitmapResource;
      _char.split('').forEach(function(singleChar) {
        ctx.drawImage(res, charMap[singleChar] * 6, 0, 5, 9, left, top - 6, 5, 9);
        ctx.translate(6, 0);
      });
    },
  });


  var canvas = new fabric.Canvas('c');
  var text = new fabric.BitmapText('Hello i am a bitmap text');

  canvas.add(text);
  canvas.setActiveObject(text);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.1.0/fabric.min.js"></script>
<canvas id="c" width="350" height="400" />