Pixi.js: When i set sprite is width != height,the graphics.drawCircle will draw a ellipse

[fengFanYong]

Hi:
i create a sprite,sprite.width != sprite.height,and i want draw a circle in sprite,but it only draw a ellipse;
the jsfiddle link : https://jsfiddle.net/of6rnar7/;
the code below:

Thank!

[Icemic]

width

The width of the sprite, setting this will actually modify the scale to achieve the value set

modify the scale

http://pixijs.github.io/docs/PIXI.Sprite.html#width

[fengFanYong]

but i need draw a circle in sprite,what am i to do?

[Icemic]

If you want to display a circle in a sprite, but not want it scaled with its parent.

Solution A: Move the Graphics out of the sprite. (Suggested)
Solution B: Scale the circle, keep the product of the scale ratio of sprite and circle be 1.

[fengFanYong]

this is the sticks,if i want to display text in a sprite,i am only scale the text,and have to get sprite Actual width and height

[staff0rd]

Hi @fengFanYong, just a heads up that you can save yourself a bit of code in fiddles by putting the reference to pixi.js in _External Resources_. Then you can just dump all your javascript in the _Javascript_ pane. Here's your original fiddle, but with pixi.js in _External Resources_; https://jsfiddle.net/mawbL4zz/

Considering you know that setting the width and height directly on a sprite (or any PIXI.Container) means you're actually setting scale, you could instead put the sprite in a non-scaled container of its own, scale the sprite, and then just add your Graphics object to the non-scaled, parent container. How does that sound?

[fengFanYong]

Thank @staff0rd ,but i do not know your meas,can your give me a demo?

[staff0rd]

Sure, here you go; https://jsfiddle.net/d2bLbtob/

Note that I've just added a container to the stage, then I just stick both the scaled sprite, and the graphics object inside that container.

[fengFanYong]

@staff0rd,but i want draw circle in a sprite,so i can not move the graphics oup of the sprite,

[staff0rd]

The sprite is a container, so if you scale it, all of it's children will be scaled also. Why does the circle have to be inside the sprite?

[fengFanYong]

because Layout is like this,the parent is a sprite,set it is width and height,and it childrens only set Percentage of parent

[staff0rd]

Understood, but if you put the sprite in a container, that container will automatically have the width/height of the sprite, so you can use the container, rather than the sprite, for layout purposes. Additionally you can add the graphics to the object to it, which will ensure the graphic object is not affected by the modifications you're making to the sprite.

[fengFanYong]

Thank,i Understood.When i want to draw a circle,and shoule add it to container,just use sprite more easies.
thank you!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.