使用fabricjs的BitmapText [英] BitmapText using fabricjs

问题描述

我研究了HTML5和更高版本中使用的字体. CSS3.我知道Web字体将支持Web字体(例如ttf/otf，eot，woff，woff2).但是，我需要在画布中使用 *.fon 字体(在本机应用程序中使用的字体).

我引用了链接可以将bitmaptext与扩展fabric.image一起使用.但是，我需要像fabricjs的普通文本对象一样使用bitmaptext.例如.字体样式，换行，行距，字体更改等.

是否可以使用 bitmaptext 进行操作，还是可以通过其他方法从 *.fon 文件中呈现文本?

.fon文件转换为位图

解决方案

在这里您可以看到Textbox类的基本替代.

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

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

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

I researched for fonts that used in HTML5 & CSS3. I know web-fonts (like ttf/otf, eot, woff,woff2) will support in Web pages. But, I need to use *.fon fonts (font that used in native application) in canvas.

I refered the link that bitmaptext can be used with extending fabric.image. But, i need to use bitmaptext like normal text object of fabricjs. eg. font-style, wrapping, line spacing, font change, etc.

Is it possible to do with bitmaptext or is there any other way to render text from *.fon files?

.fon file converted to bitmap

解决方案

Here you can see a basic override of the Textbox class.

I added all the properties i needed to handle the basic functionality, i stubbed the measureChar function to return the fixed width of the bitmap font, 6px.

At initialize time i create a map that tells me the position of the most common chars in the bitmap font, and finally i wrote a simple render method that retrieve the part of the canvas it needs in order to draw that character.

You still need to figure out fontColor, fontSize, doubleWidth and doubleHeight, but should be straight forward now that you have this example

(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！