2016-04-11 53 views
1

ここをクリックしてくださいfabricJS-circle、番号1または2または3のようなテキストを追加する方法がありません...キャンバスの円の中に?fabricJSの円オブジェクトにテキストを追加するにはどうすればよいですか?

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; 
} 
+0

Miss.Moranは、あなたはいくつかの助け(答えを)取得するために試したコードを更新する必要があります。参照してください: - http://stackoverflow.com/help/how-to-askトピックオフとしてあなたのクエリを閉じないように多くの可能性があります。 – Prasad

答えて

4

私はあなたが探しているものだと思うが、生地のグループである:

これは、キャンバス上に自分のサークルオブジェクトです。ここ

チュートリアル:ここ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; 
+0

ありがとう!! Textオブジェクトを追加して、キャンバスにCircleオブジェクトとTextオブジェクトのグループペアを追加すると、すばらしいことになります!! :) – Moran

+0

あなたは円のボーダー半径をどのように変更できるか知っていますか?円がパラメータ> 1を調整するときに変更したいと思います。 – Moran

+0

strokeWidth属性を探しています。 'var c = new fabric.Circle({... strokeWidth:2.5 ...})' – nickvans

関連する問題