Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text not displaying unless cropped #116

Open
moezzie opened this issue Jun 16, 2017 · 0 comments
Open

Text not displaying unless cropped #116

moezzie opened this issue Jun 16, 2017 · 0 comments

Comments

@moezzie
Copy link

moezzie commented Jun 16, 2017

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

});

})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant