Fabric Js can't set value originY bottom - javascript

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();

Related

How to keep SVG image scale/viewport on zoom in fabricjs version 2.x?

I upgraded fabricjs to 2.x and 3.x. in both version, when I zoom the canvas the svg image also scaling or viewport changing.
let greenCircle = new fabric.Circle({ radius: 50, fill: 'green', top: 110, left: 30 })
let orangeEllipse = new fabric.Ellipse({ rx: 50, ry: 10, fill: 'orange', top: 12, left: 100, angle: 30 });
let group = new fabric.Group([orangeEllipse, greenCircle]);
canvas.add(group);
fabric.Image.fromURL(
'https://gistcdn.githack.com/mudin/f633f3637b71b3dd9fcae1a88be27d8f/raw/850e8bf2baac6194bcf38190ca15defafb2ea2e7/floorplan.svg?raw=true',
image => {
image = image.scaleToWidth(1000);
group.addWithUpdate(image);
canvas.renderAll();
}
);
canvas.renderAll();
working demo in version 1.7.x
not working in version 3.x
I checked the breaking changes in version2, but couldnt solve my issue.
Any help would be appreciated!

string in the center of a circle - Fabrics.js

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);

How can I find an object with fabricjs

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/

Text color overlay in FabricJS

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.

After adding a path to a group in fabricjs, toSVG() gives an svg image that is different from the canvas layout

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!

Categories

Resources