3

私はいくつかの単純な MooTools 操作のロジックを取り、それを jQuery で動作するように変換しようとしています。

私が望むロジックは、このjsfiddleが許可するものは、css のサイズ変更を使用してキャンバス要素で正確なマウス位置を取得することです。

私はここで答えを見つけましたSO私は役に立たずに数時間働いています

私は彼の論理を理解していると思いますが、何らかの理由で適切な結果が見られません

これが、コメントアウトされた彼の答えからの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;
4

1 に答える 1

10

プレーンなJavaScriptを使用して小さなデモを作成しました。プロセスを説明するブログ投稿があります。

sx変数とsyが使用されている場所に特に注意して、例を見てください。それらはあなたのスケーリング比です。基本的に、これをキャンバス内のすべてのオフセットに適用する必要があります（つまり、画面内のマウスの位置からキャンバスのオフセットを引いたもの）。

于 2011-04-24T23:31:31.313 に答える