Keeping rotation centered

[beans]

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!

 

Thanks

 

[beans]

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;        }    },