CreateJS Centering an image in circle inside container
Copy link to clipboard
Copied
Hello,
until now I have avoided using a container inside An but now I need to programmatically solve the creation of a complex object that is made up of a circle and different images. For the sake of simplicity, I also inserted images into the Library and gave them appropriate names in Linkage. When the image is square in shape and dimensions like a circle, then the image is usually placed properly, however, sometimes the image dimensions are narrower or wider than the circle and trying to influence its size inside the container does not lead to the desired effect, usually the image moves to the top , left corner (0.0 circles). Is there any trick because I failed to find an idea? Thanks.
var container5 = new createjs.Container();
container5.x = 300; container5.y = 380;
var kreis3= new createjs.Shape();
kreis3.graphics.beginFill("Salmon").setStrokeStyle(2).beginStroke("#000").drawCircle(40, 40, 40);
kreis3.name="KREIS3";
var bm3 = new lib.Kirsche; //linkage name of image, dimension 80x80px
bm3.name='KIRSCHE';
//console.log(bm3.heigth); //undefined!
//console.log(kreis3.heigth); //undefined!
container5.addChild(kreis3, bm3);
stage.addChild(container5);
stage.update();
//width and heigth of kreis3 and bm3 appears as undefined
//container5.getChildAt(1).x=(container5.width/2) - (container5.getChildAt(1).width/2); //no effect
//container5.getChildAt(1).y=(container5.heigth/2) - (container5.getChildAt(1).heigth/2); //no effect
container5.getChildAt(1).scale=0.5; //cut in half image
Copy link to clipboard
Copied
Hi.
There are no width and height in EaselJS. You can use the property nominalBounds that is added to symbols by Animate in the publishing process or you can use the getBounds method from EaselJS to get the dimensions of objects like bitmaps.
Regards,
JC
Copy link to clipboard
Copied
Thanks, I'll try on your way.

