Createjs add text to image

Question

I am trying to create a speech bubble with some aligned text inside of it. for this purpose i have found this excellent github:

Scalebitmap

Now the problem is that i cannot seem to get my text inside of it. and i was wondering if any of you had attempted it.

here is some of the code ive written for this purpose:

   var image = new Image();
image.onload = function() { stage.update(); }
image.src = "assets/ScaleBitmapImage.png";

var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");
var sb = new createjs.ScaleBitmap(image, new createjs.Rectangle(12, 12, 5, 50));

sb.setDrawSize(200, 300);

stage.addChild(sb);

createjs.Tween.get(sb).to({alpha: 0},5000).call(doneAnimating);

function doneAnimating() {
    createjs.Ticker.removeEventListener("tick", stage);
}

Now i want to align the Hello world inside of the image but im very new to createjs and have no idea how to :)

Answer 1

You need to create a Container that holds both the bitmap and the text instances.

var container = new createjs.Container();
var sb = new createjs.ScaleBitmap();
var text = new createjs.Text();

container.addChild(sb, text);
stage.addChild(container);

You already know the rectangle of the ScaleBitmap, so you should be able to position the text using that.