динамически создавать элементы холста

Question

Я пытаюсь сделать так, чтобы пользователь мог загрузить и аннотировать изображение, а затем сохранить в базу данных. Инструмент позволяет рисовать линии, добавлять текст и стирать. Теперь, когда дело доходит до добавления текста, svg sulution может быть лучше, но не нашел того, который динамически загружает фоновое изображение.

В любом случае, пользователи должны иметь возможность добавлять несколько фрагментов текста и перемещать их по изображению. Для этого мне нужно иметь возможность создавать слой для текстовых фрагментов динамически, т. Е. При нажатии кнопки текста и текстовом поле есть текст.

В настоящий момент текст добавляется поверх холста в том же положении. Как я могу цикл создания слоев, скажем, в этой функции:

function draw_text() { 
ctx.fillStyle = "blue"; 
ctx.font = "12pt Helvetica"; 
ctx.fillText($('#text_entry').val(), 10, 250); 
} 

Answer 1

Благодарим вас за предложения. Я решил реализовать canvas.js, и все получилось отлично. Очень легко реализовать.

Canvas

Answer 2

Вы можете создать объект Layer, который будет иметь собственную draw_text(). Все объекты Layers нажимают на массив, вы проходите вызов всего метода render.

Слой объекта:

function Layer(_posX, _posY, _text, _context, _font, _color){ 
    this.posX = _posX; 
    this.poxY = _posY; 
    this.text = _text; 
    this.ctx = _context; //canvas context 
    this.font = _font; //String 
    this.color = _color; //String "rgb(255, 255, 255)" or "#FFFFFF" 

    this.draw_text = function(){ 
     this.ctx.fillStyle = this.color; 
     this.ctx.font = this.font; 
     this.ctx.fillText(this.text, this.posX, this.posY); 
} 

Рендер:

RenderPile = []; 
for(elt in RenderPile){ 
    elt.draw_text(); 
} 

Задавайте вопросы, если я не ясно.

Answer 3

Я не уверен на 100%, что вы просите, но я дам ответ на ваш заголовок динамически создавать элементы холста.

Это функция, которую я использую для создания новых холстов. Измените его в соответствии с вашими потребностями.

Чтобы использовать его:

var myCanvas = createLayer(500, 500); 
var myContext = myCanvas.getContext('2d'); 

Функция

function createLayer (w, h) { 

    var canvas = document.createElement('canvas'); 

    canvas.width = w; 
    canvas.height = h; 
    canvas.style.width = w + "px"; 
    canvas.style.height = h + "px"; 
    canvas.style.position = "absolute"; 

    var body = document.getElementsByTagName("body")[0]; 
    body.appendChild(canvas); 

    return canvas; 
}, 

Вы можете также сохранить контекст в массиве тоже позволит вам петлю через каждый слой.