javascript - 如何在其中添加 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)保持一致性。

Answer 2

1. 不需要新关键字

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

2. 既然你问它返回什么。它通过一个名为“canvas”的属性返回一个 Paper 对象，该对象包含对它刚刚构建的新 SVG 元素的引用。

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