Sign in to follow this  
Freckles

Setter/getter usage in PIXI

Recommended Posts

class Image extends PIXI.Graphics {

    radius;
    constructor(points, myHeight, myWidth, myRadius, buttonColor, imagePath) {
        super();

        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.beginFill(bc);
        myButton.drawRoundedRect(points[0], points[1], w, h, r);
        myButton.endFill();

        this.addChild(myButton);
        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);
        myButton.addChild(image);
    }

    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');
app.stage.addChild(img);
img.radius = 25;
console.log(img.radius);

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?

Share this post


Link to post
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

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.