如何将文本添加到 fabricJS 中的圆形对象？

Question

我在这里 fabricJS-circle 搜索，但没有找到可以添加数字 1 或 2 或 3 等文本的方法...在 canvas?

的圆圈内

这是我在 canvas 上的圈子对象：

function makeStaion(left, top, stationID) {
    var c = new fabric.Circle({
        left: left,
        top: top,
        radius: 2,
        fill: '#5afffa',
        stroke: '#666',
        selectable: true,
        centeredScaling:true,
        padding:2,
        hasRotatingPoint: false,
        borderColor: 'black',
        cornerColor: 'black'

    });
    c.hasControls = true;
    c.station = true;

    c.stationID = stationID;
    c.stationName = stations[stationID].name;
    c.description = stations[stationID].desc;
    c.image = stations[stationID].image;

    return c;
}

Answer 1

我想你要找的是面料组。

教程在这里：http://fabricjs.com/fabric-intro-part-3#groups

文档在这里：http://fabricjs.com/docs/fabric.Group.html

尝试这样的事情：

var c = new fabric.Circle({
        left: left,
        top: top,
        radius: 2,
        fill: '#5afffa',
        stroke: '#666',
        selectable: true,
        centeredScaling:true,
        padding:2,
        hasRotatingPoint: false,
        borderColor: 'black',
        cornerColor: 'black'
    });

var t = new fabric.Text(stationID, {
        fontFamily: 'Calibri',
        fontSize: 1.2,
        textAlign: 'center',
        originX: 'center',
        originY: 'center',
        left: LayoutCoordX(STA),
        top: LayoutCoordY(BL-BLOffset)-radius-.4
    });

var g = new fabric.Group([c, t],{
        // any group attributes here
    });


    g.hasControls = true;
    g.station = true;

    g.stationID = stationID;
    g.stationName = stations[stationID].name;
    g.description = stations[stationID].desc;
    g.image = stations[stationID].image;

    return g;

如何将文本添加到 fabricJS 中的圆形对象？

How to add text to a circle object in fabricJS?

jquery

canvas

frontend

fabricjs

web-frontend