Question

我正在使用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()函数，但我不确定到目前为止我必须创建的元素。有什么想法吗？

Answer 1

试试这个：

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/

是否可以动态创建Raphael绘图面板？

1 个答案: