在CSS缩放canvas中获得正确的鼠标位置

我一直在尝试采用几个简单的MooTools操作的逻辑并将其转换为使用jQuery。

我想要的逻辑是这个jsfiddle ，它允许在css大小调整的canvas元素上获得准确的鼠标位置。

我在这里找到了答案所以我已经工作了几个小时但没有用

我想我理解他的逻辑，但由于某种原因，我没有看到结果

这是我迄今为止所做的，arby的逻辑来自他的答案

// 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做了一个小小的演示 。 我有一篇博文解释了这个过程。

请查看示例，特别注意使用变量sx和sy位置。 它们是你的缩放比例。 您基本上需要将此应用于canvas中的任何偏移（即屏幕中的鼠标位置减去canvas偏移 ）。