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)以保持一致性。

Answer 2

不需要新关键字

var paper = Raphael(document.querySelector(target_css_selection_str), svg_width_int, svg_height_int);

因为你问它返回了什么。它返回一个Paper对象，它通过一个它调用的属性＆＃34; canvas＆＃34;来保存对它刚刚构建的新SVG元素的引用。

...你应该批准@Supr作为正确的答案顺便说一句，我只是加了2美分。

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

2 个答案: