動態創建畫布元素

我正在努力爲用戶創建一個工具來上傳和註釋圖像，然後保存到數據庫。該工具允許繪製線條，添加文本和擦除。現在，當添加文本時，svg sulution可能會更好，但還沒有找到動態加載背景圖像的文字。動態創建畫布元素

無論如何，用戶需要能夠添加多段文字並將它們移動到圖像上。爲了實現這一點，我希望能夠動態地爲文本片段創建圖層，即當單擊文本按鈕並且文本框中包含一些文本時。

目前，文本被添加到畫布上的同一位置上。如何循環創建圖層，例如在此功能中：

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

來源

2013-03-18 IlludiumPu36

嗨，這不是一個答案，但你的項目，似乎要像[http://web-projects.gr/myquotefive/#.UUbmNhyQXww](My報價五）。可能是你可以聯繫作者[http://walkero.gr/](Walkero）來知道他是怎麼做的 – 2013-03-18 10:10:12

嘿，這正是我想要做的......謝謝你的鏈接！ – IlludiumPu36 2013-03-19 01:08:33

不客氣。在「信息」選項卡中，您可以看到他使用[cgSceneGraph]（http://gwennaelbuchet.github.com/cgSceneGraph/）作爲框架來實現應用程序。 – 2013-03-19 07:12:33

感謝您對此的建議。我決定實施canvas.js，並且完美解決問題。很容易實現。

Canvas

來源

2013-03-21 06:36:43 IlludiumPu36

您可以創建一個Layer對象，該對象將擁有自己的draw_text（）。所有Layers對象都被推入一個數組中，您將通過調用所有渲染方法。

Layer對象：

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(); 
}

提問，如果我不清楚。

來源

2013-03-18 10:22:12 Prox

謝謝，但什麼是elt？ – IlludiumPu36 2013-03-19 03:16:23

elt只是一個實例var的循環它更多的解釋在這裏：[link] http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays [/ link] – Prox 2013-03-19 09:43:00

我不是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; 
},

然後，您還可以存儲上下文中的數組也允許你遍歷每一層。

來源

2013-03-18 19:23:08 Jarrod

謝謝。那麼我將如何動態分配id和zIndex？ – IlludiumPu36 2013-03-19 02:44:15

你並不需要這些。它們被包括在內只是爲了添加一些功能。無論如何，我已經刪除它們來給你一個裸骨的例子，並消除混淆。 – Jarrod 2013-03-19 03:17:22

動態創建畫布元素

回答

相關問題