Jump to content

Setter/getter usage in PIXI


Recommended Posts

class Image extends PIXI.Graphics {

    constructor(points, myHeight, myWidth, myRadius, buttonColor, imagePath) {

        this.imagePath = imagePath;
        let image = new PIXI.Sprite.from(imagePath);
        let w = this.myWidth = myWidth || image.width + 40;
        let h = this.myHeight = myHeight|| image.height + 20;
        let r = this.myRadius = myRadius || 5;
        let bc = this.buttonColor = buttonColor || '0x0000FF';      

        this.points = points;
        this.position.set(points[0], points[1]);
        let myButton = new PIXI.Graphics();
        myButton.drawRoundedRect(points[0], points[1], w, h, r);

        let buttonTopPadding = (w - image.width) / 2;
        let buttonLeftPadding = (h - image.height) / 2;
        image.position.set(points[0] + buttonTopPadding, points[1] + buttonLeftPadding);
        image.anchor.set(0.5, 0.5);

    set radius(radius){
        this.radius = radius;

    get radius(){
        return this.radius;

export { Image };

I wrote this code to understand the usage of setters and getters. It creats a button that has icon in the middle. I want to change the radius via setter. I do so and it doesn't work, but console.log(img.radius) results 25. 

let img = new Image([200, 150], 50, 50, null, '0x034687', './images/close.png');
img.radius = 25;

I generally want to understand the usage of setters. And if I've added text to a stage how can I update that via setter?

Link to comment
Share on other sites

small stuff:

1. no need to extend Graphics, simple Container is enough in your case

2. PIXI.Sprite.from is not a constructor, you can omit "new".

big stuff:

your setters and getter are recursions. use `myRadius` inside, and in setter you have to check - if it was changed - "myButton.clear()" and make drawRoundedRect in it again.

Edited by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...