0

KineticJS ライブラリを使用して、いくつかの画像をキャンバスに描画し、ドラッグできるようにしています。ライブラリのコピーをダウンロードしたので、作成中のキャンバス ゲームで使用するために、ライブラリに 1 つか 2 つのわずかな調整を加えることができます。

私が変更した KineticJS ライブラリ内の関数は、

drawHit: function(){}

もともと、関数は次のようになっていました。

drawHit: function() {
    this.hitCanvas.clear();
    Kinetic.Container.prototype.drawHit.call(this);
},

しかし、私が書いた関数への呼び出しをいくつか追加しました。

drawHit: function() {
    this.hitCanvas.clear();
    drawGameElements();
    drawDescriptionBoxes(imageObj);
    Kinetic.Container.prototype.drawHit.call(this);
},

私がこれを行った理由は、事前にキャンバスの周りに画像をドラッグアンドドロップすると、クリックが検出されたときにキャンバスが完全にクリアされ、画像だけが再描画されるためです。画像を移動するときにキャンバスが再描画されるたびにそこに残りたいキャンバス。(これらは、この関数に追加した 2 つの関数呼び出しによって描画されたものです)

ただし、ブラウザで自分のページを表示すると、Firebug コンソール エラーが発生します。

ReferenceError: drawDescriptionBoxes is not defined

drawDescriptionBoxes(imageObj);

ライン上

drawDescriptionBoxes(imageObj);

（関数に追加した場所）

関数「drawDescriptionBoxes」は「drawdescriptionboxes.js」というファイルで定義されており、次のコードがあります。

function drawDescriptionBoxes(imageObj){
/*  CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
        if(typeof stroke == "undefined" ){
            stroke = true;
        }
        if(typeof radius === "undefined"){
            radius = 5;
        }
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();
        if(stroke){
            context.stroke();
        }
    } */
    var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

    var liabilitiesDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 300,
        y: 400
        draggable: false
    });

    var incomeDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 540,
        y: 400
        draggable: false
    });

    var expenditureDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 750,
        y: 400
        draggable: false
    });

}

からこの関数を呼び出しています

window.onload = function(){}

私のindex.htmlページに次の行があります

drawdescriptionboxes();

ここでもまったく同じ方法で呼び出される別の関数がいくつかありますが、それらには問題はありません。

この参照エラーが発生する理由を知っている人はいますか?

編集

drawDescriptionBoxes.js の 30 行目のプロパティ リストの後に、構文エラー: missing } も表示されます。

function drawDescriptionBoxes(imageObj){
/*  CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
        if(typeof stroke == "undefined" ){
            stroke = true;
        }
        if(typeof radius === "undefined"){
            radius = 5;
        }
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();
        if(stroke){
            context.stroke();
        }
    } */
    var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

    var liabilitiesDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 300,
        y: 400
        draggable: false
    });

    var incomeDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 540,
        y: 400
        draggable: false
    });

    var expenditureDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 750,
        y: 400
        draggable: false
    });

    context.drawImage(sources[34], 70, 400, 120, 70);
    context.drawImage(sources[35], 300, 400, 120, 70);
    context.drawImage(sources[36], 540, 400, 120, 70);
    context.drawImage(sources[37], 750, 400, 120, 70);

}

行 30 は次の行です。

draggable: false

の

var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

これが他のエラーの原因であるかどうかはわかりませんか？

4

1 に答える 1

1

developer toolsChromeまたはfirefox（F12）で使用しfirebugて、スクリプトにブレークポイントを設定し、関数呼び出しを段階的にたどり、呼び出す前にライブラリが含まれて呼び出される（関数が定義されている）ことを確認してください。

関数定義を最初に呼び出す直前にコピー/貼り付けを試みる必要があります。正常drawdescriptionboxesに動作したら、関数呼び出しの前に関数定義が呼び出される場所に配置する必要があります。

于 2012-12-13T22:26:22.730 に答える