MattKetmo / darkroomjs

Extensible image editing tool in your browser
https://mattketmo.github.io/darkroomjs
MIT License
1.42k stars 405 forks source link

Text not displaying unless cropped #116

Open moezzie opened 7 years ago

moezzie commented 7 years ago

Hello, I'm right now trying to create a plugin that adds text to the middle of the canvas.

I basically just copied and customized the rotate plugin to my needs. At first i though it didn't work at all but then cropped the image by accident. The text showed up in the resulting image.

Looking at the canvas element, the text layer is there. But weirdly enough it only shows up after the image has been cropped.

Could the order of first adding the image and then the text gotten messed up in Darkrooms internals? On the other hand, the order in the fabric canvas objects array looks fine.

Thank you very much for reading this far. I would appreciate any at all help or sugestions.

(function() {
'use strict';

var TextLayer = Darkroom.Transformation.extend({
  applyTransformation: function(canvas, image, next) {

    var text = new fabric.Text('Hello Darkroom!', {
      textAlign: 'right',
      fill: 'rgb(0,200,0)'
    });

    canvas.add(text)
    canvas.centerObject(text)

    text.setCoords()

    canvas.renderAll();
    next();
  }
});

Darkroom.plugins['text'] = Darkroom.Plugin.extend({

  initialize: function InitDarkroomRotatePlugin() {
    var buttonGroup = this.darkroom.toolbar.createButtonGroup();

    var textButton = buttonGroup.createButton({
      image: 'text'
    });

    textButton.addEventListener('click', this.addTextLayer.bind(this));
  },

  addTextLayer: function addTextLayer() {
    this.darkroom.applyTransformation(
      new TextLayer()
    );
  }

});

})();