帆布文本不繪製的圖像

我使用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/

來源

2015-02-11 DonMB

從onclick刪除addText，並加入到addImage

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

Example

來源

2015-02-11 09:22:12

是工程。有人可以解釋爲什麼它必須是這樣的，我不能像我的例子那樣做嗎？ – DonMB 2015-02-11 09:28:32

@DonMB您的代碼不起作用，因爲'.fromURL'是異步函數，這就是爲什麼文本總是BEHIND圖像。當您點擊鏈接時，您會從網址請求圖片，並且您不會等待下載此圖片。 – 2015-02-11 09:36:59

感謝亞歷山大 – DonMB 2015-02-11 12:31:43

帆布文本不繪製的圖像

回答

相關問題