0

我正在使用 raphael.js，我的问题是：是否可以使用按钮动态生成 raphael 绘图面板？到目前为止，我已经尝试使用 createElement 来做到这一点，但它没有奏效。

这是使用 raphael.js 的脚本

var g_masterPathArray;
var g_masterDrawingBox;
var g_masterPaper;

function initDrawing() {
    var g_masterPaper = Raphael(10, 10, 700, 500);

    var masterBackground = g_masterPaper.rect(10, 10, 600, 400);
    masterBackground.attr("fill", "#eee");
    masterBackground.mousemove(function (event) {
        var evt = event;
        var IE = document.all ? true : false;
        var x, y;
        if (IE) {
            x = evt.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
            y = evt.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
        }
        else {
            x = evt.pageX;
            y = evt.pageY;
        }

        // subtract paper coords on page
        this.ox = x - 10;
        this.oy = y - 10;
    });

    var start = function () {
        g_masterPathArray = new Array();
    },
    move = function (dx, dy) {
        if (g_masterPathArray.length == 0) {
            g_masterPathArray[0] = ["M", this.ox, this.oy];
            g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
            g_masterDrawingBox.attr({ stroke: "#000000", "stroke-width": 3 });
        }
        else
            g_masterPathArray[g_masterPathArray.length] = ["L", this.ox, this.oy];

        g_masterDrawingBox.attr({ path: g_masterPathArray });
    },
    up = function () {
        ;
    };

    masterBackground.drag(move, start, up);
    return g_masterPaper;
}

我已经定义了一个generate()函数，但我不确定到目前为止我必须创建的元素。有任何想法吗？

4

1 回答 1

0

尝试这个：

html:

<div id="container"></div>
<input type="button" id="button" value="Clear" />
<input type="button" id="generate" value="Generate" />

js：

function generate(){
var self = this;
    self.CurrentFreeID = 0;
    self.newCanvas = {};
    self.Papers = [];
    self.Container = document.getElementById('container');
    self.doGenerate = function (){
        self.newCanvas = document.createElement('div');
        self.Container.appendChild(self.newCanvas);
        self.newCanvas.id  = 'someID'+self.CurrentFreeID.toString();

        self.Papers.push(Raphael(self.newCanvas.id,200,200));
        self.Papers[ self.CurrentFreeID].rect(10,10,10,10);
        self.CurrentFreeID++;
    };
    self.Init=function (){
        document.getElementById('generate').onclick = self.doGenerate;
    };
}

var gener = new generate();
gener.Init();

http://jsfiddle.net/xNSVm/4/

于 2013-08-13T07:10:16.890 回答