Jump to content

Drag and rotate container - Error on mouse position


Recommended Posts

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.

Link to comment
Share on other sites

  • 3 months later...

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


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.rotation = 0.2
rectangle.interactive = true
var circle = new PIXI.Graphics()
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  :D


Edited by nukerito
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...