如何在fabricJS中向圆形对象添加文本？

Posted 2023-02-18

【中文标题】如何在fabricJS中向圆形对象添加文本？

【英文标题】：How to add text to a circle object in fabricJS?

【发布时间】：2016-08-01 20:13:02

【问题描述】：

我在这里搜索 fabricJS-circle ，但没有找到添加数字 1 或 2 或 3 等文本的方法...在画布上的圆圈内？

这是我在画布上的圆形对象：

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;

【问题讨论】：

Miss.Moran 您需要更新您尝试获取帮助（答案）的代码。参考：-***.com/help/how-to-ask 有更多机会不关闭您的查询作为题外话..

【参考方案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;

【讨论】：

谢谢！！我添加了 Text 对象并将组添加到画布 - 一对 Circle 和 Text 对象，它工作得很好！！ :)

你知道我如何改变圆的边界半径吗？我想在圆圈缩放参数> 1时更改它。

我怀疑您正在寻找 strokeWidth 属性。 var c = new fabric.Circle( ... strokeWidth: 2.5 ... )