Question

我正在使用Fabric.js来实现一个应用程序，该应用程序将允许用户选择图像模板，然后在图像上写入一些文本，然后导出图像。我尝试了初步实施。我遇到的问题是，在我将图像显示在画布上后，单击图像后图像会消失。

这是javascript：

$(document).ready(function(){
    console.log("entering the ad_man js file");

    canvas = new fabric.Canvas('c');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
    };
    img.src = 'http://ovtoaster.com/wp-content/uploads/2014/02/cc-logo.jpg';
    var textCharsInfo = function (textObj) {
        var results = { charDims: [], totalLength : 0 };
        if (textObj && textObj.text && textObj.text.length > 0) {
            var str = '';
            var prevWidth = 0;
            for (var i = 0, length = textObj.text.length; i < length; i++) {
                var c = textObj.text.charAt(i);
                str += c;
                var txtObjForCalc = new fabric.IText(str, { 
                    fontFamily: textObj.fontFamily,
                    fontWeight: textObj.fontWeight,
                    fontSize: textObj.fontSize,
                    left: 2000,
                    top: 2000,
                    useNative: true 
                });

                canvas.add(txtObjForCalc).renderAll();
                var charWidth = txtObjForCalc.width - prevWidth;
                prevWidth = txtObjForCalc.width;
                results.charDims.push({ width: charWidth, height: txtObjForCalc.height });
                canvas.remove(txtObjForCalc);
                txtObjForCalc = null;
            }
            results.totalLength = prevWidth;
        }

        return results;
    };


    var text = new fabric.IText("This is text that is curved along an arc.", { 
        fontFamily: 'Italianno',
        fontWeight: '',
        fontSize: 40,
        left: 250,
        top: 250,
        useNative: true 
    });
    canvas.add(text);
    canvas.renderAll();;
});

这是html部分：

<h1>Hello World test</h1>
<canvas id="c" width="400" height="400">test</canvas> 
<img src="http://ovtoaster.com/wp-content/uploads/2014/02/cc-logo.jpg" id="image_man"></img>

这是JSFiddle。如何保留图像？

这是小提琴的更新版本，有更多更改。我能够按照我想要的方式制作初始图片。现在，在点击时更改背景图像使新图像也消失。这是jsfiddle。

Answer 1

问题是您是以原生样式将图像添加到画布中，当您使用此样式时，图像对象不会添加到结构画布中，当您单击绘制的文本时，该结构将重绘所有添加到画布的形状，因此未添加的图像将会消失。

将图片以这种方式添加到画布

var imgInstance = new fabric.Image(img);
canvas.add(imgInstance);

而不是原生风格

    ctx.drawImage(img,0,0);

DEMO

画布上的图像在点击事件上消失

1 个答案: