1

Raphael JavaScript ライブラリをテストしていますが、小さな問題が発生しています。キャンバスに 4 つの図形を描画しています。次に、クリックしてオブジェクトを現在選択されているオブジェクトにすることができます。次に、削除キーの押下をリッスンするイベント ハンドラーを追加します。これはうまくいきますが、関数を呼び出すことができないようです。以下は、私の問題を説明するコードです。

これは、キャンバス上の各円を表すクラスです。

var Shape = new Class({
    initialize: function(x, y, color)
    {
        this.shape = paper.circle(x, y, 25);
        this.shape.attr("fill", color);

        this.shape.click(function()
        {
            if(selectedObj == null)
            {
                selectedObj = this;
                selectedObj.attr({'stroke':'orange', 'stroke-width':'5'});
            }
            else if(selectedObj != this)
            {
                selectedObj.attr({'stroke':'orange', 'stroke-width':'0'});
                selectedObj = this;
                selectedObj.attr({'stroke':'orange', 'stroke-width':'5'});
            }
            else if(selectedObj == this)
            {
                selectedObj.attr({'stroke':'orange', 'stroke-width':'0'});
                selectedObj = null;
            }
        });
    },
    deleteThis: function()
    {
        alert("Inside The deleteThis() Function.");
    }
});

これにより形状が作成され、クリックすると次のことが行われます。

  1. selectedObjが null の場合、クリックされた形状が に設定されselectedObj、形状の周りに小さなオレンジ色の縁が描画されます。
  2. クリックされた形状でない場合はselectedObj、以前に選択されたオブジェクトの小さな境界線を取得し、新しくクリックされた形状を現在選択されているアイテムとして設定します。
  3. 形状が選択されたオブジェクトである場合、もう一度クリックすると選択が解除されます。

次に、4 つの図形をキャンバスにプッシュします。

objShapes.push(new Shape(50, 50, "red"));   
objShapes.push(new Shape(250, 50, "blue")); 
objShapes.push(new Shape(50, 250, "yellow"));   
objShapes.push(new Shape(250, 250, "green"));

キャンバス上のオブジェクトを正常に選択および選択解除できるようになったので、選択したオブジェクトの関数を呼び出せるようにする必要があります。関数をトリガーするには、キーボードを使用しています。次のコードは私が使用するものです：

$(document).keydown(function(event)
{
    if(event.keyCode == 46)
    {
        if(selectedObj == null)
        {
            alert("nothing to delete");
        }
        else
        {
            alert("Deleting " + selectedObj.attr('fill') + " Circle.");
            selectedObj.deleteThis();
        }
    }
});

イベント ハンドラの一部のみが機能します。削除キーを押して何も選択しないと、警告ウィンドウに、削除するものが何も選択されていないことが通知されます。ただし、オブジェクトを選択して削除キーを押すと、警告が表示され、どの円を削除しようとしているのかが通知されますが、その後、関数の呼び出しに失敗しdeleteThis()ます。.attr()関数を呼び出すのに関数を呼び出さない理由がわかりませんdeleteThis()。

関数を呼び出せない理由は何ですか?

4

1 に答える 1

1

問題は、クラスのオブジェクトではなく、selectedObj内部変数を参照していることです。shapeオブジェクト自体を参照するようにすることができます (以下のコードを参照してください。基本的には、通常はselforと呼ばれる変数にオブジェクトをキャッシュしthat、格納するオブジェクトとしてクロージャー内で使用します)。次に、シェイプを参照するには、 のselectedObj.shape代わりに を実行しselectedObjます。混乱は、クラスに名前が付けられShape 、メンバー変数がshape. 混乱を避けるために、これらの名前のいずれかを変更することを検討してください。

また、javascript コンソールでデバッガーを使用する必要があります。もしそうなら、「deleteThisis not defined on object 」のようなエラーメッセージが表示され、これを追跡するのに役立ちました.

とにかく、上記の変更を加えたコードは次のとおりです。

var Shape = new Class({
    initialize: function(x, y, color)
    {
        // To keep track of the object itself
        var self = this;

        this.shape = paper.circle(x, y, 25);
        this.shape.attr("fill", color);

        this.shape.click(function()
        {
            if(selectedObj == null)
            {
                selectedObj = self; // Assign the object, not the shape
                selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'5'});
            }
            else if(selectedObj != self) // Compare the object, not the shape
            {
                selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'0'});
                selectedObj = this; // Assign the object, not the shape
                selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'5'});
            }
            else if(selectedObj == self) // Compare the object, not the shape
            {
                selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'0'});
                selectedObj = null;
            }
        });
    },
    deleteThis: function()
    {
        alert("Inside The deleteThis() Function.");
    }
});

次に、他の部分でも同じ調整を行います。

$(document).keydown(function(event)
{
    if(event.keyCode == 46)
    {
        if(selectedObj == null)
        {
            alert("nothing to delete");
        }
        else
        {
            alert("Deleting " + selectedObj.shape.attr('fill') + " Circle."); // Reference the shape here
            selectedObj.deleteThis(); // This is the object now
        }
    }
});
于 2012-04-16T23:44:00.117 に答える