1

これが実際のjsFiddleの例です。

基本的には、数字を入力して「追加」をクリックします。その数のボックスを含む行はRaphaelを使用して生成され、ビューボックスは行に合わせてサイズが変更されます。行を追加すると、ビューボックスのサイズが再び変更されます。これは正常に機能します。

私の問題は、ボックスを作成した後、行の最後に削除オブジェクトを追加することです。これをクリックすると、行が削除されます。これは正常に機能しているように見えますが、新しい行を追加しようとして行を削除すると、コンソールメッセージでビューボックスが縮小するという点が異なります。

Unexpected value 10 0 NaN NaN parsing viewBox attribute.

エラーは次の2行のコードから発生していることがわかります。

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

sectionSize.widthとはNaNですが.height、理由はわかりません。行を正しく削除していませんか？

完全なコード：

$(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 に答える