在CSS縮放畫布中獲取正確的鼠標位置

Question

我一直試圖採取幾個簡單的MooTools操作的邏輯，並將其轉換爲使用jQuery。

我想要的邏輯就是爲了這個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; 

Answer 1

我用普通的JavaScript了一個小demo。我有一個blog post解釋過程。

查看示例，特別注意使用變量sx和sy的位置。他們是你的縮放比例。您基本上需要將此應用於畫布內的任何偏移量（即屏幕上的鼠標位置減去畫布偏移量）。