Jump to content

Keeping rotation centered


Recommended Posts

Hi guys, new to the forums but have been lurking for a while tapping into your knowledge!


I'm building something in PIXI and I'm having a bit of trouble figuring out one aspect of it.


I've got a display object container the contains a tiling sprite. I want this tiling sprite to be rotatable around the centre point of the display object container while still being able to drag the tiling sprite around.


I was looking into setting the pivot point by working out the distance from the centre of the DOC with toLocal() but I seem to be missing the piece that would link these together.


If you only rotate the DOC then obviously you mess up the x and y axis for easily moving them tilesprite again.

I've attached a quick mockup of how i'd like this to work.




I'm forcing the size of the DOC to stay the same by adding a pixi graphic at the size of the stage so the centre point should always be the center of the stage.

_setupBinds = function() {    _dragLayer.mousemove = _dragLayer.touchmove = function(data) {        _dragMove.call(this, data);    };},_dragMove = function(data) {     ​if(this.dragging) {                 var newPosition = this.data.getLocalPosition(this.parent);                _activeItem.position.x += (newPosition.x - this.dragging.x);        _activeItem.position.y += (newPosition.y - this.dragging.y);        var distFromCenter = _activeItem.getLocal({x: _activeItem.parent.width/2,y: _activeItem.parent.height /2}, _activeItem.parent);        _activeItem.pivot.x = distFromCenter.x;        _activeItem.pivot.y = distFromCenter.y;                this.dragging = newPosition;            } },

This is just one of the ideas I've tried but there's obviously a way to go.


I should also mention that there is another DOC off to the side of the canvas that I'm doing all of the drag events on so im never physically interacting with the above directly. I hope I've explained that ok, it's getting late and my brain is fried! Any help would be very much appreciate though!





Link to comment
Share on other sites

I actually went at it a different way that makes loads more sense in the end!


I think I got myself a bit tied up in the getLocalPosition part, it should have taken these interraction co ordinates relative to the item I was rotating moving etc..


Rather than move the actual TilingSprite too it makes sense to just position that on the stage and then interract with the tilePosition.


Code below if anyone is interested.


Seems so simple now, frustrating the amount of over complication I was trying to get in!

var _dragStart = function(data) {        data.originalEvent.preventDefault();        this.data = data;        this.dragging = this.data.getLocalPosition(_activeItem);    },    _dragEnd = function(data) {        this.dragging = false;        this.data = null;    },    _dragMove = function(data) {        if(this.dragging) {            var newPosition = this.data.getLocalPosition(_activeItem);            _activeItem.tilePosition.x += (newPosition.x - this.dragging.x);            _activeItem.tilePosition.y += (newPosition.y - this.dragging.y);            this.dragging = newPosition;        }    },
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...