Question

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

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

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

有与

相关的文字

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

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

有关如何做到这一点的任何想法？我重新进行了几次讨论，但不清楚，如何做到这一点。

任何指针都会非常感激。

Answer 1

我不清楚你的要求究竟是什么。

无论如何，我为你创造了一个JS小提琴。

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();

这至少可能有点帮助。评论这个答案，如果可能的话，我会尽力帮助你。

Answer 2

This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.

Here's an example, showing that in action ...

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>

在fabricjs中的图像上添加文本

2 个答案: