1

这是一个有效的jsFiddle示例。

基本上你输入一个数字并点击“添加”。将使用 Raphael 生成包含该数量框的行，并且视图框将调整大小以适应行。添加更多行，视图框将再次调整大小。这工作正常。

我的问题是，在创建框后，我在行尾添加了一个删除对象。单击它应该只是删除该行。这看起来工作正常，除了一旦我删除一行尝试添加一个新行将导致视图框随着控制台消息而缩小

Unexpected value 10 0 NaN NaN parsing viewBox attribute.

我知道错误来自以下两行代码：

var sectionSize = section.getBBox();
paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

哪里sectionSize.width和.height是NaN，但我不知道为什么。我没有正确删除行吗？

完整代码：

$(window).load(function() {

    var paper = Raphael("container", 600, 500);
    var section = paper.set();
    var rowCount = 0;
    var boxSize = 15;
    var boxPadding = 5;
    var pathString = " m0,0 h" + boxSize + ", v" + boxSize + " h-" + boxSize + " v-" + boxSize + " z";

    $("#add-row").click(function() {
        var row = paper.set();

        for (var i = 0; i < $("#count").val(); i++) {
            var x = ((boxSize + boxPadding) * i) + (boxPadding * 2);
            var y = ((boxSize + boxPadding) * rowCount);

            var transformString = "t" + x + "," + y + ", s1,1,0,0 r0,0,0";

            var box = paper.path(pathString).transform(transformString);
            box.attr({
                fill: "red",
                stroke: "black",
                cursor: "pointer"
            });
            row.push(box);

            if (i == $("#count").val() - 1) {
                var del = paper.text(((box.getBBox().width + x) + boxPadding), ((box.getBBox().height / 2) + y), "x");
                del.click(function() {
                    row.remove();
                });

                row.push(del);
            }
        }

        rowCount++;
        section.push(row);

        // Resize ViewBox
        var sectionSize = section.getBBox();
        paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

    });
});

HTML

<input type="text" id="count" value="3" />
<button id="add-row">Add</button>

<div id="container" style="border: 1px solid black;">
</div>
4

1 回答 1

1

显然我没有正确删除元素。在删除元素本身之前，我必须将其从section集合中删除，否则任何调用getBBox都会导致宽度和高度为 NaN。

del.click(function() {
  section.splice($.inArray(row, section), 1);
  row.remove();
});
于 2012-05-23T16:00:02.590 回答