0

我正在使用 KineticJS 库将一些图像绘制到画布上，并使它们可拖动。我已经下载了该库的副本，以便可以对其进行一两次微调，以便将其与我正在制作的画布游戏一起使用。

我改变的 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);
},

我这样做的原因是因为事先在画布周围拖放图像时，当检测到点击时画布将被完全清除，并且只会重绘图像 - 我还显示了其他一些东西每次移动图像时重新绘制画布时我想保留在那里的画布。（这些东西是由我添加到这个函数的两个函数调用绘制的）

但是，当我现在在浏览器中查看我的页面时，我收到了 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 行的属性列表后缺少 }：

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 tools在 Chrome 或firefox 中使用firebug(F12) 在脚本中设置断点并逐步执行函数调用，并确保在调用之前包含并调用您的库（函数已定义）。

drawdescriptionboxes你应该在第一次调用之前尝试复制/粘贴你的函数定义，一旦它工作正常，你应该把它放在函数定义在函数调用之前被调用的地方。

于 2012-12-13T22:26:22.730 回答