Можно ли динамически создавать панель рисования Рафаэля?

Я работаю с 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(), но я не уверен в элементах, которые мне нужно создать до сих пор. Любые идеи?


javascript html raphael createelement
person regeme    schedule 11.08.2013    source источник
comment
Что такое панель для рисования? Вы имеете в виду бумагу? Вы создаете одно право в функции initDrawing.   -  person Martin    schedule 12.08.2013
comment
да, я имел в виду бумагу, на которой мы рисуем.. Мне нужно создать эту бумагу при нажатии кнопки.. Возможно ли это?   -  person regeme    schedule 12.08.2013
comment
Как это? w3schools.com/jsref/event_onclick.asp   -  person Martin    schedule 12.08.2013
comment
Также я пробовал вызывать функцию initDrawing при нажатии кнопки, но это тоже не сработало.   -  person regeme    schedule 12.08.2013
comment
Нет , например jsfiddle.net/regeme/xNSVm, когда вы нажимаете создать новый холст, созданный по мере того, как вы см.. Я хочу такой же экшен на бумаге Рафаэля   -  person regeme    schedule 12.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это:

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/

person Adam Moszczyński    schedule 13.08.2013
comment
Привет, спасибо за интерес, но когда я нажимаю «Создать», отображаются только маленькие квадратики, которые я не мог нарисовать.. Я мог уловить суть.. - person regeme; 13.08.2013
comment
Я думал, что вы хотите динамически создавать документы Рафаэля, из вашего комментария я понимаю, что вы хотите реализовать рисование в Рафаэле. Это не должно быть так сложно реализовать. Просто создайте путь и добавьте к его атрибуту пути вашу текущую позицию курсора (относительно бумаги) в этом формате L + CurrentPosX + , + CurrentPosY; - person Adam Moszczyński; 13.08.2013