在CSS缩放画布中获取正确的鼠标位置
问题描述：
我一直试图采取几个简单的MooTools操作的逻辑，并将其转换为使用jQuery。在CSS缩放画布中获取正确的鼠标位置
我想要的逻辑就是为了这个jsfiddle它允许的是通过css调整大小来在canvas元素上获得准确的鼠标位置。
我发现answer here，所以我已经工作了几个小时都无济于事
我想我明白他的逻辑，但拟合由于某种原因，我没有看到结果
这里是我有什么从他answer与阿拜的逻辑迄今所做注释掉
// 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;
不确定你在设置'cssScale'的行中想要做什么。您将使用 - height属性除以height属性来划分宽度 - 即1.即使这样，您在由单引号分隔的字符串中也有单引号。这应该给你语法错误。我猜你想要'var cssScale = [$（'canvas'）。width（）/ $（'canvas'）。attr（'width'），$（'canvas'）。height（）/$（'canvas'）。attr（'height'）]' – musaul 2011-04-24 18:29:42
我不是100％肯定要么我试图将mootools逻辑转换为jquery，我认为正在发生的是你得到的css增长率/收缩这条线 – austinbv 2011-04-24 18:31:29