0

我正在尝试为用户创建一个工具来上传和注释图像，然后保存到数据库。该工具允许绘制线条、添加文本和擦除。现在在添加文本时，svg 解决方案可能会更好，但还没有找到动态加载背景图像的解决方案。

无论如何，用户需要能够添加多段文本并将它们移动到图像上。为此，我需要能够动态地为文本片段创建图层，即当单击文本按钮并且文本字段中有一些文本时。

目前，文本被添加到画布顶部的相同位置。如何循环创建图层，例如在此函数中：

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

3 回答 3

2

我不是 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-18T19:23:08.623 回答
1

您可以创建一个拥有自己的 draw_text() 的图层对象。所有的 Layers 对象都被推入一个数组，你通过调用所有的渲染方法。

图层对象：

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-18T10:22:12.040 回答
0

感谢您对此的建议。我决定实现 canvas.js 并且效果很好。很容易实现。

帆布

于 2013-03-21T06:36:43.320 回答