I want to draw a colored circle with a number on its center. I wasn't able to find anything in the docs to achieve the same.
Any guidance in regards to this would be very helpful.
Thanks
I found the answer to this. May be this will save someone's precious time:
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
You could try creating a fabric.Circle object and fabric.Text object with the same left and top that are both center positioned.
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);
Related
Tell me, can anyone come across such a problem.
I need to change the reference point of the coordinate system from LT to LB. On the official website there is a test for applying different origins ( http://fabricjs.com/test/misc/origin.html ).
In my project, I was not able to change originY, the same when using fiddle
https://jsfiddle.net/borneoBlack/pz4rbken/6/
var rect = new fabric.Rect({
width: 20,
height: 20,
left: 10,
top: 10,
angle: 0,
fill: '#000',
originX: 'left',
//originY: 'bottom' - does not work
originY: 'top'
});
originX and originY reffer to origin of the object related to TL corner of the canvas.
What you can do is to parse all the objects in canvas and adjust the position of the blocks.
Check the following example:
https://jsfiddle.net/6m034se2/
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 20,
height: 20,
left: 10,
top: 10,
angle: 0,
fill: '#000',
originX: 'left',
//originY: 'bottom' - does not work
originY: 'top'
});
canvas.add(rect);
canvas.getObjects().forEach(function(block){
block.top = canvas.getHeight() - block.top - block.height;
block.setCoords();
})
canvas.renderAll();
I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);
You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs
I have circles on my webpage, and I want to find a circle and then draw a line to another circle.
Is this possible with FabricJS?
Try starting here:
http://fabricjs.com/stickman/
http://fabricjs.com/quadratic-curve/
I made a example for you:
var canvas = new fabric.Canvas('c');
canvas.add(
new fabric.Circle({ top: 50, left: 50, radius: 25, fill: 'red' }),
new fabric.Circle({ top: 300, left: 300, radius: 25, fill: 'red' })
);
canvas.renderAll();
$('#drawLine').click(function(){
canvas.add(new fabric.Line([50, 50, 300, 300], {
left: 50+25, //25 = 50/radius
top: 50+25,
stroke: 'blue'
}));
});
Link here: http://jsfiddle.net/q6Y6k/17/
I am trying to create an effect in FabricJS, where the color of some text I am adding to my canvas is determined by a texture. Should be easy, but when I apply the texture as a pattern, I cannot work out the combination of scale, rotation etc that I need to make it work. It appears to me like the pattern is being applied 'local' to the object, so (0,0), is the object's top left coords, rather than that of the overall image.
So if here's my text color texture,
and I placed some text in the middle, the effect I want would be this:
I've tried various things with static canvas etc, but I've hit a dead end. Please can someone help? Here's my current attempt:
var patternSourceCanvas = new fabric.StaticCanvas();
oImg.setAngle(-angles[i]);
patternSourceCanvas.add(oImg);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: oImg.getWidth(),
height: oImg.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
var text = new fabric.Text(entry, {
originX: 'center',
originY: 'center',
left: (coords[i][0] * bufWidth),
top: (coords[i][1] * bufHeight),
fill: pattern,
centeredRotation: true,
angle: angles[i],
fontFamily: 'Kapra',
fontSize: 42
});
Huge thanks in advance!
i got this idea, you can obtain the effect using the globalCompositeOperation property of fabricJs objects
// clear canvas
canvas.clear();
var text = new fabric.Text('AAAAA', {
originX: 'center',
originY: 'center',
left:30,
top: 30,
fill: 'rgba(0,0,0,1)',
centeredRotation: true,
angle: 20,
fontSize: 100,
});
canvas.add(text);
fabric.Image.fromURL('../assets/pug.jpg', function(oImg) {
oImg.globalCompositeOperation = 'source-atop';
oImg.width = canvas.width;
oImg.heigth = canvas.height;
canvas.add(oImg);
var rect = new fabric.Rect({
width: 200,
height: 200,
globalCompositeOperation: 'destination-over',
fill: 'black'
});
canvas.add(rect);
});
So basically you render the text in any color, black.
Then you render the color image OVER the text, covering all the canvas, specifying globalCompositeOperation = 'source-atop'
After this you have a colored text on a white background.
To have a black background now draw a rect big as the canvas, but specify globalCompositeOperation = 'destination-over'
So you will do something totally different but it will work.
May need tweaking and may not fit your needs. But it should show the example you posted.
I have a group of shapes that are supposed to be moved and scaled together on the canvas. For doing this I added all of these to a fabric Group. One of the shape is a fabric Path. While it adds properly on the canvas, when converting the Canvas to SVG, it changes it's position.
I have made a fiddle for it : http://jsfiddle.net/RZcY7/4/
Export svg button will push the svg data to console. click there to open it in browser. It can be seen that the position of triangle(which is a fabric Path) is different on canvas and svg.
Here's the code:
var DefaultGroupSettings = {
originX: 'center',
originY: 'center',
hasBorders: true,
hasControls: true,
hasRotatingPoint: true,
lockUniScaling: true
};
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
radius: 50,
left: 175,
top: 75,
fill: '#aac'
});
var group = new fabric.Group([rect, circle], DefaultGroupSettings);
canvas.add(group);
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
top: 150,
left: 100
});
group.addWithUpdate(path);
canvas.renderAll();
Is it an issue to add a Path to a Group? If yes, how can I club Path and an Object together?
Thanks in advance!