Center Polygon

[Ninjadoodle]

Hi @enpu / Panda People

I'm trying to draw a triangle and set it's anchor to the center. Something is however not working right and the anchor is off.

I have a feeling it's to do with having to draw the polygon (triangle) at 0,0 coordinates first, and then set it's position later.

I'm a little confused on how to draw it correctly ...

game.createClass('ShapeTriangle', {

    init: function(x, y, width, height, rot, color) {
        
        this.spriteFill = new game.Graphics();
        this.spriteFill.fillColor = color;
        this.spriteFill.drawPolygon([0, 0, width, 0, width/2, -height, 0, 0]);
        this.spriteFill.anchorCenter();
        this.spriteFill.position.set(x, y);
        this.spriteFill.rotation = rot * Math.PI;
        this.spriteFill.addTo(game.scene.robotContainer);
    }
});

Thanks heaps in advance for any tips

[Wolfsbane]

You're right. There might be some inconsistency in the engine here. 

var box = new game.Graphics();
box.drawRect(0, 0, 100, 100);
box.anchorCenter();

That draws the Rect at 0,0,100,100, then centers it 

Where as for circles:

var circle = new game.Graphics();
circle.fillColor = '#ff0000';
circle.drawCircle(0,0,50); //x,y, radius)
//circle.anchorCenter();

Circles are already drawn as being 'centered', so calling anchorCenter will actually offset the Circle so that it's no longer correctly centered. (just a little FYI)

drawPolygon anchorCenter just doesn't work. This is because in graphics.js._getBounds() function just doesn't cater for it. getBounds checks for x/y coodinates, width/height values, and/or radius. Circles have a Radius, and x,y coodinates so they will return something.

Rectangles don't have a radius, but they are instantiated with a width/height, so they return o.k.  Polygons don't have any of these.(no x,y,width or height attributes)

Possible solution: Polygon's have x,y,height,width, and these values are derived from the points that are passed in? E.g. width could be the difference between the left-most x coordinates and the right-most coordinates. Same for height with the y-axis.

The other option is just to have _getBounds() check if this is a Polygon shape, and if it is, do the Math on the Point list to find the various correct values, etc.

 _getBounds: function() {
        var wt = this._worldTransform;
        var a = wt.a;
        var b = wt.b;
        var c = wt.c;
        var d = wt.d;
        var tx = wt.tx;
        var ty = wt.ty;
        var width = 0;
        var height = 0;

        for (var i = 0; i < this.shapes.length; i++) {
            var data = this.shapes[i];
            var sx = data.shape.x;
            var sy = data.shape.y;

            if (data.shape.radius) {
                sx += data.shape.radius / game.scale;
                sy += data.shape.radius / game.scale;
            }
            else {
                sx += data.shape.width / game.scale;
                sy += data.shape.height / game.scale;
            }

            width = Math.max(width, sx);
            height = Math.max(height, sy);
        }

        var x2 = a * width + tx;
        var y2 = b * width + ty;
        var x3 = a * width + c * height + tx;
        var y3 = d * height + b * width + ty;
        var x4 = c * height + tx;
        var y4 = d * height + ty;

        var minX = Math.min(tx, x2, x3, x4);
        var minY = Math.min(ty, y2, y3, y4);
        var maxX = Math.max(tx, x2, x3, x4);
        var maxY = Math.max(ty, y2, y3, y4);

        this._worldBounds.x = minX;
        this._worldBounds.y = minY;
        this._worldBounds.width = maxX - minX;
        this._worldBounds.height = maxY - minY;
        return this._worldBounds;
    },

(current code for getBounds shown for reference. No solution coded inside)

[enpu]

Polygon support is still "work in progress" and missing features, like calculating it's bounds. I have added this to roadmap.

At the moment you can only manually se the anchor.

[Ninjadoodle]

@enpu when you say ‘manually’ - do you mean by calculating the width and height of the polygon?

anchorCenter doesn’t seem to work, and I’m not sure how to create the polygon at 0,0.

Thank you!

[Wolfsbane]

7 hours ago, enpu said:

At the moment you can only manually se the anchor.

Ah ha! I didn't even think of that. 

@Ninjadoodle , you can just put this in the code you posted like this:

this.spriteFill.anchor.set(width/2,height/2);

 

[Ninjadoodle]

Hi @Wolfsbane @enpu  -Thanks for that!  

It works, but only until I try to rotate the shape, then it's completely off again.

[Wolfsbane]

Oh, right, my bad. that's because you're drawing the picture from 0,0, to width, negative(-)height.

Either draw the triangle with it with 0,0, width, height being the top left of the 'picture'. E.g.

this.spriteFill.drawPolygon([0, height, width, height, width/2, 0],true);

 

Alternatively, change the anchor to be center of the picture. Which would be:

this.spriteFill.anchor.set(width/2,-height/2);

 

(But it's more typical to draw the picture in a 0,0, width, height box, then center/position it from there.)

[Ninjadoodle]

@Wolfsbane - Wicked! Thanks heaps that works

Trying to figure out how this shape drawing works lol.