2

多数の画像を表示しているHTML5キャンバスがあります。これらの画像の中にはドラッグ可能なものとそうでないものがあります。KineticJSライブラリのローカルコピーを使用してドラッグ可能な機能を追加しました（少し編集したい関数が1つまたは2つあるため、ローカルコピーを使用しています）。

私が今探しているのは、カーソルがキャンバス上にあるときはいつでもカーソルの現在の位置を保存するために、いくつかのJS変数を作成することです。これができるようにしたいのは、ユーザーがドラッグ可能な画像の1つをドラッグしているときにカーソルがどこにあるかを検出し、正しい場所にドラッグしたかどうかを確認できるようにするためです。

これを行うために次の関数を作成しました。

function getMousePosition(mouseX, mouseY){
    mouseX = e.clientX;
    mouseY = e.clientY;
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}

この関数をKineticJS_mousemove関数内から呼び出しているので、この関数は次のようになります。

_mousemove: function(evt) {
    this._setUserPosition(evt);
    var dd = Kinetic.DD;
    var obj = this.getIntersection(this.getUserPosition());
    getMousePostion(mouseX, mouseY);

    if(obj) {
        var shape = obj.shape;
        if(shape) {
            if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
                if(this.targetShape) {
                    this.targetShape._handleEvent('mouseout', evt, shape);
                    this.targetShape._handleEvent('mouseleave', evt, shape);
                }
                shape._handleEvent('mouseover', evt, this.targetShape);
                shape._handleEvent('mouseenter', evt, this.targetShape);
                this.targetShape = shape;
            }
            else {
                shape._handleEvent('mousemove', evt);
            }
        }
    }
    /*
     * if no shape was detected, clear target shape and try
     * to run mouseout from previous target shape
     */
    else if(this.targetShape && (!dd || !dd.moving)) {
        this.targetShape._handleEvent('mouseout', evt);
        this.targetShape._handleEvent('mouseleave', evt);
        this.targetShape = null;
    }

    // start drag and drop
    if(dd) {
        dd._startDrag(evt);
    }
}

私が抱えている問題は、ブラウザでページを表示し、カーソルをキャンバス上に移動すると、カーソルを移動するたびに「getMousePostionが定義されていません」というFirebugコンソールエラーが発生することです。これらのエラーの中には、それだけを示しているものもあれば、横に小さな「+」が付いているものもあります。

横に「+」が付いているエラーの1つを展開すると、次の追加情報が表示されます。

_mousemove()kinetic.js (line 3443)
evt = mousemove clientX=15, clientY=229
(?)()kinetic.js (line 3417)
evt = mousemove clientX=15, clientY=229

clientX展開可能な各エラーは、との異なる数値clientYを示しています。これは、私の関数が、カーソルがキャンバス上を移動するときにカーソルのx座標とy座標を取得していることを明確に示しています。だから私が疑問に思っているのは、なぜgetMousePosition定義されていないというエラーが表示されるのですか？

4

1 に答える 1

0

存在しないオブジェクトのプロパティを取得しようとしていますe。mouseXandを関数に渡す代わりに、mouseYandeventオブジェクトを渡す必要があります。

//you're passing parameters that don't exist in _mousemove
function getMousePosition(mouseX, mouseY){
    mouseX = e.clientX; //and trying to use e, which doesn't exist
    mouseY = e.clientY;
    //also passed parameters aren't meant to be used as local variables like this
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}

渡すパラメーターをイベントオブジェクトに変更し、ローカル変数として作成するmouseXと、機能するはずです。mouseYもう1つの非常に大きな問題は_mousemove、関数を呼び出していることgetMousePostionです。スペルに注意してください。'i'を忘れました。

function getMousePosition(e){
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    console.log("mouseX = " + mouseX);
    console.log("mouseY = " + mouseY);
}

_mousemove: function(evt) {
    ...
    getMousePosition(evt);
    ...
于 2013-03-06T13:23:48.147 に答える