Question

这是一个有效的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>

Answer 1

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

del.click(function() {
  section.splice($.inArray(row, section), 1);
  row.remove();
});

从集合中删除元素后，为什么我的viewbox没有正确调整大小？

1 个答案: