3

私はkineticjsを使用して、キャンバスにウィジェットを描画しています。このウィジェットは幅600ピクセルで、いくつかの長方形（デフォルトでは24）で構成されています。この長方形の上で、他の長方形をドラッグできます。これを「カーソル」と呼びましょう。

スムーズなドラッグの代わりに、マウスが十分に離れている場合にのみカーソルを他の長方形にジャンプさせたい（必要に応じて段階的なドラッグのように）。

たとえば、カーソルが0,0にあり、合計24個の長方形がある場合、マウスが25,0（600px /24個の長方形=25px）にあるときにのみ、カーソルを次の長方形に移動させます。

だから私はそれを実装しました：

cursor.setDragBoundFunc(function(pos){
    var caseSize = WIDTH / caseNum;
    var posX = Math.round(pos.x/caseNum) * caseSize;
    if(posX > (WIDTH - caseSize)) {
        posX = WIDTH - caseSize;
    }

    if(posX < 0 ) {
        posX = 0;
    }

    return {
        x: posX, 
        y: cursor.getAbsolutePosition().y
    }
});

問題はpos.x、キャンバス内のマウスの位置ではなく、ドラッグイベントの開始からのマウスの位置を表すことです（キャンバスの中央からドラッグを開始しても、posは0,0になります）。

ここに問題の例があります：http：//jsfiddle.net/H9rpz/

キャンバス内のマウスの位置を取得するにはどうすればよいsetDragBoundFunc()ですか？

ありがとう

4

3 に答える 3

2

この正確な機能は、KineticJSの手動テストで実装されています。探しているコードは次のとおりです。

https://github.com/ericdrowell/KineticJS/blob/master/tests/js/manualTests.js#L1004

試してみる ：）

于 2012-11-16T06:56:30.893 に答える
1

setDragBoundFunc関数は2つの引数を受け入れるようで、2番目はeventあなたが求めているものを含む可能性のあるオブジェクトです。

cursor.setDragBoundFunc(function(pos, event){
   var posX = event.offsetX;
   ....
});

また、関数の先頭に数学論理エラーがあります。それは読むべきです：

cursor.setDragBoundFunc(function(pos, event){
   var caseSize = WIDTH / caseNum;
   var posX = event.offsetX;
   posX = Math.floor(posX /  caseSize) *  caseSize; // This right here
   ...
});

実例： http： //jsfiddle.net/H9rpz/3/

于 2012-11-14T16:13:26.580 に答える
1

@Janの答えに加えて、あなたの数学は少しずれています：

cursor.setDragBoundFunc(function(pos, event){
    var posX = event.offsetX;
    posX = Math.floor(posX/WIDTH * caseNum) * caseWidth;
    ...
于 2012-11-14T16:34:46.717 に答える