我一直在尝试采用几个简单的 MooTools 操作的逻辑并将其转换为与 jQuery 一起使用。
我想要的逻辑是这样的jsfiddle http://jsfiddle.net/rQkSF/它允许通过 css 调整大小来获得画布元素上准确的鼠标位置。
我找到了在这里回答 https://stackoverflow.com/questions/4152518/resizing-the-canvas-with-css-skews-up-mouse-action-help-me所以我已经工作了几个小时但无济于事
我想我理解他的逻辑，但由于某种原因我没有看到结果
这是我到目前为止对 arby 的逻辑所做的事情answer https://stackoverflow.com/questions/4152518/resizing-the-canvas-with-css-skews-up-mouse-action-help-me/4171800#4171800注释掉了
// 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;
我做了一点demo http://jsfiddle.net/Ea4kc/使用纯 JavaScript。我有一个博客文章 http://www.gkspk.com/view/programming/drag-n-drop-with-html-canvas/解释过程。
看一下示例，特别注意变量的位置sx and sy正在被使用。它们是您的缩放比例。您基本上需要将其应用于画布内的任何偏移（即鼠标在屏幕中的位置减去画布偏移).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
