Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

CreateJS Centering an image in circle inside container

Explorer ,
Aug 23, 2021 Aug 23, 2021

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

 

TOPICS
Code , How to
195
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 23, 2021 Aug 23, 2021

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 26, 2021 Aug 26, 2021
LATEST

Thanks, I'll try on your way.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines