在fabricjs中的图像上添加文本答案

【问题标题】：Adding text over images in fabricjs在fabricjs中的图像上添加文本
【发布时间】：2017-10-14 20:29:24
【问题描述】：

开发这个应用程序，其中画布上有几个图像，我正在使用 fabricjs。

我想添加覆盖在图像上的文本，然后也可以将其删除。

是一种直接覆盖图像的方法，或者我必须创建另一个图层并在其上写入。

有类似的文字

var text = new fabric.Text('hello world', { left: 100, top: 100 }); canvas.add(text);

上述方法的问题是，如果图像移动文本不会移动，那么文本是否有可能直接写在图像上方？

关于如何做到这一点的任何想法？我重新讨论了几个不太清楚的讨论，如何做到这一点。

任何指针将不胜感激。

【问题讨论】：

标签： fabricjs

【解决方案1】：

这可以通过创建一个 image 和一个 text 对象来实现，然后将这两个对象添加到一个组中，最后将该组添加到画布中。

这是一个例子，展示了它的实际应用......

var canvas = new fabric.Canvas('canvas');

// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
    img.scaleToWidth(100);
    img.scaleToHeight(100);
    
    // create text
    var text = new fabric.Text('hello world', {
        left: 10,
        top: 5,
        fontSize: 15,
        fontFamily: 'Verdana',
        fill: 'white'
    });
    
    // add image and text to a group
    var group = new fabric.Group([img, text], {
        left: 50,
        top: 50,
    });
    
    // add the group to canvas
    canvas.add(group);
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

【讨论】：

所以我能够使用将图像子类化到自定义类然后直接写入其上下文来完成。

【解决方案2】：

我不太清楚你的要求到底是什么。

不管怎样，我已经为你创建了一个 JS Fiddle。

https://jsfiddle.net/xpntggdo/9/

textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',  
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});

canvas.add(textBox);
canvas.renderAll();

这至少可能有点帮助。对此答案发表评论，如果可能的话，我会尽力为您提供更多帮助。

【讨论】：