中央に数字の付いた色の付いた円を描きたい。私は同じことを達成するために文書で何かを見つけることができませんでした。円の中心にある文字列 - Fabrics.js
これに関するガイダンスは非常に役に立ちます。
おかげ
中央に数字の付いた色の付いた円を描きたい。私は同じことを達成するために文書で何かを見つけることができませんでした。円の中心にある文字列 - Fabrics.js
これに関するガイダンスは非常に役に立ちます。
おかげ
私はこれに対する答えを見つけました。これは誰かの貴重な時間を節約することがあります
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);
あなたは位置の両方の中心であることと同じ左と上で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);
でも、私はそれについて考えました。しかし、このアプローチの問題は、ユーザーがテキストが動かない円を動かす場合です。これが私が取るアプローチであれば、私は両方のオブジェクトを結合して一緒に操作できるようにする方法を見つける必要があります。 –
キャンバスの 'object:selected'イベントにフックされていて、いずれかのオブジェクトが選択されたときに自動的にそのオブジェクトをグループに追加します(http://stackoverflow.com/questions/19632006/creating-and-selecting-a -group-programmatically-with-fabric-jsを使ってこれを行います)。それ以外の場合は、おそらくカスタムクラスを作成する必要があります。 – Ben
それは正しいです。要素を中心にしたい場合は、originX/Yを中央に置き、上と左を与えないようにするのが一番簡単です。 – AndreaBogazzi