在循环中分配容器 Y 位置

Question

我想让我的 "definitionContainer" 的 Y 位置与 "questionMarkContainer" 的 Y 位置相同。

我不确定如何保存问题标记容器的 Y 位置并在单击问题标记容器时将其应用于 "definitionContainer" Y 位置。

我试过了 definitionContainer.myNewCords = xOffsetNumberContainer; definitionContainer.y = definitionContainer.myNewCords;

我怎样才能完成任务。

 function writeOutDefinitionsQuestionMarksOnRight() {
        var yOffsetNumberContainer = 102;

            for (var c = 0; c < randomTermsForUserSorting.length; c++) {

                var questionMarkContainer = new createjs.Container();
                var Highlight = new createjs.Shape();
                Highlight.graphics.beginFill("hotPink").drawRoundRect(0, 0, 30, 25, 5);
                var HighLightlabel = new createjs.Text("?", "10pt arial bold", "white");
                HighLightlabel.textAlign = "center";
                HighLightlabel.x = 15
                HighLightlabel.y = 5
                questionMarkContainer.addChild(Highlight, HighLightlabel);
                self.stage.addChild(questionMarkContainer);
                questionMarkContainer.x = 720;
                questionMarkContainer.y = yOffsetNumberContainer;
                questionMarkContainer.termIndex = c;

                // calling a function to return the clickHandler function
                // because there was some crazy stuff with using the closure of 
                // termIndex where the clickHandler function was always the last index.
                // The 'usual' method of getting around this situation wasnt working for some reason.
                var clickHandler = (function (termIndex) {
                    return function (e) {
                        var definitionContainer = new createjs.Container();

                        definitionContainer.myNewCords = yOffsetNumberContainer;

                        rect = new createjs.Shape();
                        rect.graphics.beginFill("DarkGreen").drawRoundRect(0, 0, 350, 150, 8);

                        var name = new createjs.Text(randomTermsForUserSorting[termIndex].Name, "12pt arial", "white");
                        name.x = 5;
                        name.y = 5;
                        name.lineWidth = 300;

                        var definitionText = new createjs.Text(randomTermsForUserSorting[termIndex].Definition, "10pt arial", "white");
                        definitionText.x = 5;
                        definitionText.y = 35;
                        definitionText.lineWidth = 330;

                        var xButtonRectangle = new createjs.Shape();
                        xButtonRectangle.graphics.beginFill("red").drawRoundRect(320, 5, 20, 20, 2);

                        var xTextCloseButton = new createjs.Text("X", "10pt arial", "white");
                        xTextCloseButton.x = 325;
                        xTextCloseButton.y = 7;

                        definitionContainer.addChild(rect, name, definitionText,xButtonRectangle, xTextCloseButton);

                        self.stage.addChild(definitionContainer);
                        definitionContainer.x = 300;

                        definitionContainer.y = yOffsetNumberContainer;

                        definitionContainer.addEventListener("click", function () {
                            self.stage.removeChild(definitionContainer);
                        });
                    }
                })(c);

                questionMarkContainer.addEventListener("click", clickHandler);
                yOffsetNumberContainer += 40;
            }

        }

Answer 1

看起来您只是在调整单个 yOffsetContainer 属性，它在点击函数中被引用。点击稍后触发，并将使用 yOffsetContainer 变量，该变量已设置为项目数 x 40。它不会在每个项目内保存循环值。

您应该能够将循环值作为参数传递到闭包中，以将循环值存储在点击处理程序中：

var clickHandler = (function (termIndex, yOffset) {
    return function (e) {

        // OTHER CODE NOT SHOWN

        definitionContainer.y = yOffset;

        // MORE CODE NOT SHOWN

    }
})(c, yOffsetNumberContainer);

在循环中分配容器 Y 位置

Assigning a containers Y position In loop

javascript

html5-canvas

createjs