オブジェクトをhtml5キャンバスの位置にスナップする方法は？

Question

私は、html5キャンバスとJavaScriptを使用してジグソーパズルゲームを作っています。私はその場所に画像（ピース）を持っていますが、それらはドラッグ可能ですが、グリッド上にあるように作品をしたいので、画像をドラッグしながらクリックすると、その画像は特定のタイルにしか配置できません3x3グリッド。

同様の質問がStackで以前に尋ねられましたが、唯一の応答がdrupalモジュールを指していて、私はdrupalを使用していません。私はAsp.netを使用するオンラインでもう一つ類似したソリューションを見つけましたが、フロントエンドでこれをすべて解決することを望んでいます。サーバー側のコードを使用する必要がある場合は、PHPのみしか知りません。

キャンバスのrenderGrid関数は、グリッドを描画しますが、オブジェクトを特定の場所にスナップするためには機能しません。

誰でもこれを行う手がかりを持っていますか？

Answer 1

座標を設定する際にdivide/floor down mathを使用します。例えば。各24ピクセルのスペースxに：

var gridx = Math.floor(x/24)*24;