Question

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

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

是否可以使用 bitmaptext ，还是有其他方式从 * .fon 文件中呈现文字？

.fon file converted to bitmap

Answer 1

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

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

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

你仍然需要弄清楚fontColor，fontSize，doubleWidth和doubleHeight，但是现在你应该直截了当地说明了这个例子

＆＃13;

(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);
})();

＆＃13;

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

＆＃13;

使用fabricjs的BitmapText

1 个答案: