Drag and rotate container - Error on mouse position

[verdeandrea]

Hi guys,

 

i've just started with pixi.js and everything is pretty new for me.

I'm trying to create a container that can be rotated by dragging.

I'me studying all the math stuff (radians, angles, etc.) but before this i need to get the position of mouse pointer related to the container.

So that's the idea: click on a Sprite, drag it and the whole container rotate.

 

So this is the code a wrote until now

// create a renderer instance.var renderer = PIXI.autoDetectRenderer(1024, 1024);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);var stage = new PIXI.Container;stage.position.x = 1024 / 2;stage.position.y = 1024;stage.velocity = 0;// create a texture from an image pathvar pallaTexture = PIXI.Texture.fromImage("assets/images/palla.svg");// create a new Sprite using the texturevar palla = new PIXI.Sprite(pallaTexture);palla.anchor.x = 0.5;palla.anchor.y = 0.5;palla.position.x = 0;palla.position.y = 0;palla.scale.x = 1;palla.scale.y = 1;palla.interactive = true;palla.buttonMode = false;palla.mousedown = function(data) { this.data = data; this.alpha = 0.6; this.dragging = true;}palla.mouseup = function(data) { this.alpha = 1 this.dragging = false; // set the interaction data to null this.data = null;}palla.mousemove = function(data) { if(this.dragging) {  var mouseX = data.data.originalEvent.pageX;  var mouseY = data.data.originalEvent.pageY;  //Mouse position  var mouse = new PIXI.Point(mouseX,mouseY);  //Mouse position relative to DisplayObjectContainer  var point = stage.toLocal(mouse);  }} stage.addChildAt(palla, 0);// kick off the animation loop (defined below)animate();function animate() { stage.rotation += stage.velocity; // start the timer for the next animation loop requestAnimationFrame(animate); // render the stage    renderer.render(stage);}

So i know that i need all the math to get the velocity variable but the first error i get is

Uncaught TypeError: Cannot read property 'worldTransform' of null

related to this line 

var point = stage.toLocal(mouse);

Could you please explain why i'm getting this error? Thanks a lot!

 

By the way, if you have some resources on how to get the "dragging and rotate" result, i'll be very grateful. Thanks.

[xerver]

I think you are looking for getLocalPosition()

 

http://pixijs.github.io/docs/PIXI.interaction.InteractionData.html#getLocalPosition

 

Which returns a point containing the coords of the interaction data relative to the container you pass in (hint: pass in the object you are rotating).

[verdeandrea]

Thanks a lot xerver. Could you please explain how to use getLocalPosition() ?

 

I've tried with 

palla.data.getLocalPosition(...)

and

palla.getLocalPosition(...)

but I always get this error

Uncaught TypeError: ....getLocalPosition is not a function

[xerver]

Assuming `palla` is the object you want to rotate:

palla.mousemove = function(data) {    console.log(data.getLocalPosition(palla));};

[verdeandrea]

I always get that error

Uncaught TypeError: data.getLocalPosition is not a function

[xerver]

Can you create a jsfiddle that reproduces your problem please?

**Edit**

Sorry, your variable naming confused me. What you want is this:

 

palla.mousemove = function(event) {    console.log(event.data.getLocalPosition(palla));};

[verdeandrea]

Thanks a lot! That works!

[nukerito]

UPDATE: Nevermind, I updated to last pixi version and now it works fine

 

Hello Xerver, 

I'm having problems applying getLocalPosition with a rotated graphic:

 

rectangle, is the object I'm rotating and whom I'm applying getLocalPosition

circle, is a little circle I'm positioning where I pressed click

 

It works fine when rectangle is not rotated, but when it's rotated not. (see image)

 

 

var rectangle = new PIXI.Graphics()

rectangle.beginFill(0xff0000)

rectangle.drawRect(0,0,200,200)

rectangle.endFill()

rectangle.position.set(renderer.width/2-100,renderer.height/2-100)

rectangle.rotation = 0.2

rectangle.interactive = true

stage.addChild(rectangle)

 

var circle = new PIXI.Graphics()

circle.beginFill(0x000000)

circle.drawCircle(0,0,10)

circle.endFill()

stage.addChild(circle)

 

rectangle.on("mousedown",onMD)

function onMD (e) {

var p = e.data.getLocalPosition(e.target)

circle.x = rectangle.x+p.x

circle.y = rectangle.y+p.y

}

 

What can I do? I've tried everything..

Thanks for your help

PS: Sorry for my bad english

 

UPDATE: Nevermind, I updated to last pixi version and now it works fine 

Edited October 29, 2015 by nukerito