javascript - 如何在 <div> 标签中添加 raphaeljs 对象

Question

$(document).ready(function(){                           
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
            $("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({
                fill : "blue",
                stroke : "black",
                strokeWidth : 0,
                r : 5
        }));
    });
});

我试过在其中添加 Raphael 对象，但它不会显示在屏幕上

Answer 1

Raphael 渲染到您作为第一个参数提供的容器中。返回值是用于渲染的 Raphael 纸对象。简而言之，只需删除 $("#id1").append 即可显示。

$(document).ready(function(){                           
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
        var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600);
        paper.rect(30, 50, 80, 100).attr({
            fill : "blue",
            stroke : "black",
            strokeWidth : 0,
            r : 5
        });
    });
});

---

此外，由于您无论如何都在使用 jQuery，因此您可能希望将 document.getElementById('canvasdiv') 替换为 $('#canvasdiv').get(0) 为了保持一致性。