按钮单击功能中的全局变量未定义

Question

我有一个画布，我将textObjects（Text（）数组）放在画布上。我能够单独移动这些对象并在选择时（在调试中我可以看到）对象被保存在一个名为mySel的全局变量中。

我的问题是，一旦我点击按钮（＃btn-bold），我的全局变量textObjects和mySel都是未定义的。单击按钮时，我想遍历textObjects列表并编辑textObject的fontStyle，其位置与mySel相同。

为什么会发生这种情况，我该如何解决这个问题。我在其他函数中调用并设置全局变量，但是当我调用click函数时，它们是未定义的。

从JQuery模式对话框按钮调用添加文本。使用init（）

中的函数setInterval(draw, 20)每20ms刷新一次Canvas

我提供了代码，负责添加到列表，绘制列表和鼠标移动。如果需要初始化和/或初始化变量，我会发布它们。

的Javascript

function Text() {
    this.text = "Hallo";
    this.x = 0;
    this.y = 0;
    this.fillColor = "black";
    this.fontFamily = "Arial";
    this.fontStyle = "normal";
    this.fontSize = "18pt";
    this.fontWeight = "normal";
}

function addText(text, fillColor, fontSize, fontFamily, fontStyle, fontWeight, x, y) {
    var textTemp = new Text;
    textTemp.text = text;
    textTemp.fillColor = fillColor;
    textTemp.fontSize = fontSize;
    textTemp.fontFamily = fontFamily;
    textTemp.fontWeight = fontWeight;
    textTemp.fontStyle = fontStyle;
    textTemp.x = x;
    textTemp.y = y;

    textObjects.push(textTemp);
    invalidate();
}
var textObjects = [];
var mySel;
function drawText(context, textObject) {
    if (textObject.x > WIDTH || textObject.y > HEIGHT) return;
    if (textObject.x < 0 || textObject.y < 0) return;

    context.fillStyle = textObject.fillColor;
    context.font = textObject.fontWeight + " " + textObject.fontSize + " " + textObject.fontFamily;

    context.fillText(textObject.text, textObject.x, textObject.y);
}
// Happens when the mouse is moving inside the canvas
function myMove(e) {
    if (isDrag) {
        getMouse(e);

        mySel.x = mx - offsetx;
        mySel.y = my - offsety;

        // something is changing position so we better invalidate the canvas!
        invalidate();
    }
}
function myDown(e) {
    getMouse(e);
    clear(gctx);
    var lText = textObjects.length;
    for (var i = lText - 1; i >= 0; i--) {
        // draw shape onto ghost context
        drawText(gctx, textObjects[i]);

        // get image data at the mouse x,y pixel
        var imageData = gctx.getImageData(mx, my, 1, 1);
        var index = (mx + my * imageData.width) * 4;

        // if the mouse pixel exists, select and break
        if (imageData.data[3] > 0) {
            mySel = textObjects[i];
            offsetx = mx - mySel.x;
            offsety = my - mySel.y;
            mySel.x = mx - offsetx;
            mySel.y = my - offsety;
            isDrag = true;
            canvas.onmousemove = myMove;
            invalidate();
            clear(gctx);
            alertSelected();
            return;
        }

    }
    // havent returned means we have selected nothing
    mySel = null;
    // clear the ghost canvas for next time
    clear(gctx);
    // invalidate because we might need the selection border to disappear
    invalidate();
}
function invalidate() {
    canvasValid = false;
}
function getMouse(e) {
    var element = canvas, offsetX = 0, offsetY = 0;

    if (element.offsetParent) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    // Add padding and border style widths to offset
    offsetX += stylePaddingLeft;
    offsetY += stylePaddingTop;

    offsetX += styleBorderLeft;
    offsetY += styleBorderTop;

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY
}
$("#btn-bold").click(function () {
    for (var i = 0; i < textObjects.length() ; i++) {
        if ((textObjects[i].x == mySel.x) && (textObjects[i].y == mySel.y)) {
            if (textObjects[i].fontWeight == "normal") {
                textObjects[i].fontWeight = "bold";
            }
            if (textObjects[i].fontWeight == "bold") {
                textObjects[i].fontWeight = "normal";
            }
        }
    }

});

HTML

<div id="top-level">
    <div class="row" id="content-header">
        <h1 style="text-align:center">Edit Photo's EditorView.cshtml</h1>
    </div>
    <div class="row" id="content-middle">
        <div id="designer-canvas" class="col-md-8">
            @{ Html.RenderPartial("ClientPage"); }
        </div>
        <div id="content-builder" class="col-md-4">
            <row>
                <div id=text-input-top-level class="col-md-12">
                    <h3><label>Text</label></h3>
                    <textarea id="text-inputarea" , placeholder="Text here."></textarea>
                </div>
            </row>
            <hr />
            <row>
                <div id="text-size-check" class="col-md-12">
                    <h4>Font Size</h4>
                    <div id="font-size-slider">
                        <div id="font-size-slider-handle" class="ui-slider-handle"></div>
                    </div>
                </div>
            </row>
            <hr />
            <row>
                <div id="text-weight-check" class="col-md-6">
                    <h4>Font Weight</h4>
                    <div id="text-weight-check-buttons">
                        <button id="btn-bold">B</button>
                        <button id="btn-italic">I</button>
                    </div>
                </div>

                <div id="text-position" class="col-md-6">
                    <h4>Text Position</h4>
                    <div id="text-position-buttons">
                        <button>1</button>
                        <button>2</button>
                        <button>3</button>
                        <button>4</button>
                        <button>5</button>
                    </div>
                </div>
            </row>
            <hr />
            <row>

            </row>
        </div>
    </div>
</div>

ClientPage.cshtml

<canvas id="canvas"></canvas>