円の中心にある文字列 - Fabrics.js

Question

中央に数字の付いた色の付いた円を描きたい。私は同じことを達成するために文書で何かを見つけることができませんでした。

これに関するガイダンスは非常に役に立ちます。

おかげ

Answer 1

私はこれに対する答えを見つけました。これは誰かの貴重な時間を節約することがあります

var circle = new fabric.Circle({ 
    radius: 100, 
    fill: '#eef', 
    scaleY: 0.5, 
    originX: 'center', 
    originY: 'center' 
}); 

var text = new fabric.Text('hello world', { 
    fontSize: 30, 
    originX: 'center', 
    originY: 'center' 
}); 

var group = new fabric.Group([ circle, text ], { 
    left: 150, 
    top: 100, 
    angle: -10 
}); 

canvas.add(group); 

http://fabricjs.com/fabric-intro-part-3

Answer 2

あなたは位置の両方の中心であることと同じ左と上でfabric.Circleオブジェクトとfabric.Textオブジェクトを作成してみてください。

var circle = new fabric.Circle({ 
    top: 0, //Arbitrarily placed at top left corner 
    left: 0, 
    radius: 100, 
    originX: 'center', 
    originY: 'center' 
}); 

var text = new fabric.Text("Your number here", { 
    top: 0, 
    left: 0, 
    originX: 'center', 
    originY: 'center', 
    fill: "#FFFFFF" // Circle background defaults to black, so make text visible 
}); 

// Assuming you have a fabric.Canvas stored in canvas already 
canvas.add(circle); 
canvas.add(text);