画布文本不是在图像上绘制的

canvas text is not drawn on an image

本文关键字：图像 绘制 布文本 文本      更新时间：2023-09-26

我正在使用fabric.js将url中的图像绘制到画布中：

function addImage(url) {
  canvas.clear();
  fabric.Image.fromURL(url, function(oImg) {
    oImg.selectable = false;
    canvas.add(oImg);
  });
};

工作。现在我也想用这个函数在图像的顶部绘制一个文本：

function addText(text_to_add) {
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText(text_to_add,10,50);
};

为了确保文本绘制在图像的顶部，我知道我首先需要绘制图像，然后绘制文本，如下所示：

<a href="#" onclick="addImage('/path/to/image/image.jpg'); addText('Hello World');">Click me to Draw image and text</a>

结果是，文本始终绘制在图像后面。我看到文本一毫秒，然后图像覆盖文本。我希望文本绘制在图像的顶部。

我已经添加了这个jsfiddle，但不知何故它无法运行。也许fabric.js库有问题。http://jsfiddle.net/02vrr15d/

从onclick中删除addText，并添加到addImage

function addImage(url) {
    fabric.Image.fromURL(url, function (oImg) {
        oImg.selectable = false;
        canvas.add(oImg);
        addText('Hello World');
    });
};

示例

相关文章：