Jump to content

Center Polygon


Recommended Posts

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.position.set(x, y);
        this.spriteFill.rotation = rot * Math.PI;

Thanks heaps in advance for any tips :)

Link to comment
Share on other sites

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

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

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)

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)

Link to comment
Share on other sites

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:



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

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