Pixi.js sprites offset when dragging

[gronk]

View the jsfiddle demonstrating the issue (just click and drag the circle - relevant code on line 102).

When I add a circle to the stage with Pixi.Graphics and drawCircle( 150, 100, 50 ), the circle when dragged becomes offset by it's position ( +150, +100 ) in the Graphics container.

(and if we request the circle.position it's also inaccurate)

What's the best way to add a shape to the screen and set it's position if it's not through a Graphics container?

[ivan.popelyshev]

1.  Its common newbie mistake. Position of graphics is independent from shapes. What do you think will happen with position if you draw two circles?

graphics.position.set(150, 100)
graphics.drawCircle(0, 0, 50)

2. There was a thread about dragging two weeks or so ago, i posted working code there. Im on mobile device, so, please find it on your own

[gronk]

I think this is the post you're referencing, which is very helpful thank you.

I'm testing out your code but I'm still experiencing the shape being offset while dragging, check out this new fiddle demonstrating where I'm at. (click and drag the circle multiple times, it's origin is always where it was originally set)

I still don't understand how Pixi expects me to add shapes to the screen with drag controls, because it seems that I'm doing it wrong and it's screwing up the dragging.

[ivan.popelyshev]

Ok, first, clone() doesnt work in v4, right, but that doesnt mean you just can use an assignment there. we NEED that oldPosition, there's no way you calculate drag without it. And without clone() it wil be always the same as current position

//in dragstart
this.oldPosition = new PIXI.Point();
this.oldPosition.copy(this.position);
//in dragmove
pv.x = pv2.x + (newPosition.x - this.dragPos.x);
pv.y = pv2.y + (newPosition.y - this.dragPos.y);