使用 fabricjs 的位图文本

Question

我研究了 HTML5 和 CSS3 中使用的字体。我知道网页字体（如 ttf/otf、eot、woff、woff2）将支持网页。但是，我需要在 canvas.

中使用 *.fon 字体（本机应用程序中使用的字体）

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

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

.fon file converted to bitmap

Answer 1

在这里您可以看到文本框的基本覆盖 class。

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

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

您仍然需要弄清楚 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" />

使用 fabricjs 的位图文本

BitmapText using fabricjs

fonts

webfonts

html5-canvas

fabricjs