3

I have been trying to take the logic of a couple simple MooTools operations and convert it to work with jQuery.

The logic I want is for this jsfiddle what it allows is to get accurate mouse position on a canvas element with css resizing.

I found the answer here on SO I have been working for a couple hours with no avail

I think I understand his logic but fitting for some reason I am not seeing results

Here is what I have done so far with arby's logic from his answer commented out

// Get the change ratio for the new css set size
//var cssScale = [canvas.getSize().x / canvas.get('width'), canvas.getSize().y / canvas.get('height')];
var cssScale = [$('canvas').height() / $('canvas').attr('height'), $('canvas').width() / $('canvas').attr('$('canvas').height() / $('canvas').attr('height'),')]

//Create an object of the dimensions
// I think from my looking at the jsfiddle x&y is the position of the rect in his canvas
// and w&h are the height and width of that rect so it's not really necessary for my problem which
// is just getting mouse cords accuratly.
//this.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]);

// This is the offset of the clickable square in his code.
//this.offset = [x - this.dims[0], y - this.dims[1]];

// Now I do not know what this is
// If the offset is just for position in their code why is it used here
// How can you display just scaled mouse position
this.x = (x - this.offset[0]) / cssScale[0] + w * .5;
this.y = (y - this.offset[1]) / cssScale[1] + h * .5;
Community
  • 1
  • 1
austinbv
  • 9,297
  • 6
  • 50
  • 82
  • not sure what you're trying to do in the line where you set `cssScale`. You're dividing the width with the - height attribute divided by the height attribute - i.e. 1. Even then you have single quotes in a string delimited by single quotes. That should be giving you syntax errors. I'm guessing you want something like `var cssScale = [$('canvas').width() / $('canvas').attr('width'), $('canvas').height() / $('canvas').attr('height')]` – musaul Apr 24 '11 at 18:29
  • I am not 100% sure either I am trying to convert the mootools logic to jquery, what I think is going on is you are getting the ratio of css growth/shrinkage with that line – austinbv Apr 24 '11 at 18:31

1 Answers1

10

I've made a little demo using plain javascript. I've got a blog post explaning the process.

Take a look at the example with special note to where the variables sx and sy are being used. They're your scaling ratio. You'll basically need to apply this to any offsets within the canvas (i.e. mouse position in the screen minus the canvas offset).

musaul
  • 2,341
  • 19
  • 26