ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 753 forks source link

Add Bitmap text plugin #1039

Open vmichnowicz opened 9 years ago

vmichnowicz commented 9 years ago

Bitmap text with support for multiple text styles via HTML tags. Also allow for line breaks and custom color fill.

var text = new Kinetic.BitmapText(),
  img = new Image();

img.src = 'data:image/gif;base64...';

text.setAttrs({
  text: 'normal text<b>BOLD Text</b><br><i>italic text</i>',
  image: img,
  fill: 'blue', // Fill all non-transparent parts of image with this color
  chars: {
    standard: {
      a: [0, 0, 8, 10],
      b: [9, 0, 8, 10],
      c: [17, 0, 6, 10],
    },
    b: {
      a: [0, 12, 10, 10],
      b: [11, 12, 9, 10],
      c: [21, 12, 8, 10],
    },
    i: {
      a: [0, 23, 8, 10],
      b: [8, 23, 8, 10],
      c: [17, 23, 7, 10],
    }
});