When I draw a circle on fabricjs canvas it always appears on bottom right corner even though I set the coordinates to center. How can I make the circle draw center of the canvas?
var circle = new fabric.Circle({
top: 300,
left: 300,
radius: 100
});
You can set drawing origin of the circle object to center, using originX and originY property.
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
top: 100,
left: 100,
radius: 50,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>
You have centerObject().
canvas.add(oImg)
canvas.centerObject(circle);
canvas.renderAll();
That sets your circle in the center of the canvas.
Related
I'm trying to add a border to a circle. The only round about way I can think of is by adding another circle underneath it. Is there a better way?
fiddle: http://jsfiddle.net/9mqqh3of/4/
PS: having trouble centering it too.
HTML:
<canvas id="c" width="300" height="300"></canvas>
Javascript:
var canvas = new fabric.Canvas('c');
let radius = 20;
let radius1 = 10;
let circle = new fabric.Circle({
fill: "green",
hoverCursor: "pointer",
left: 20 - radius,
opacity: 1,
radius,
selectable: false,
strokeWidth: 5,
strokeColor: "white",
top: 20 - radius
});
let circle1 = new fabric.Circle({
fill: "red",
hoverCursor: "pointer",
left: 20 - radius1,
opacity: 1,
radius: radius1,
top: 20 - radius1
});
canvas.add(circle);
canvas.add(circle1);
Use stroke for stroke color and strokeWidth for width of stroke.
DEMO
let canvas = new fabric.Canvas('canvas');
let circle = new fabric.Circle({
fill: "green",
hoverCursor: "pointer",
left: 20,
opacity: 1,
radius:100,
selectable: false,
strokeWidth: 15,
stroke: "red",
top: 20
});
canvas.add(circle)
canvas {
border:1px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>
How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation.
http://konvajs.github.io/docs/animations/Rotation.html
Ex
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50 // how to solve this using formula so it will dynamic,
y: 25 // how to solve this using formula so it will dynamic
}
});
Rotating rectangular objects around their centers
By default, KonvaJS sets the rotation point of a rectangle at its top-left corner. Therefore to rotate from the center of the rectangle you must push the rotation point to the center of the rectangle.
You can do this by setting the offsetX=rectangleWidth/2 and offsetY=rectangleHeight/2
var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: yellowRectWidth,
height: yellowRectHeight,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: yellowRectWidth/2,
y: yellowRectHeight/2
}
});
Rotating circular objects around their centers
By default, KonvaJS sets the rotation point of circular shapes at their centerpoints. Therefore to rotate from the center of circular shapes you won't have to set any offsets.
I need to build some canvas app, but the shapes are irregular and elements are overlapping each other. I am using fabric.js for canvas and importing SVG files to draw elements, but I can't detect right hovered objects.
Here are examples:
I want to detect on mouse over when it will be above shape.
How it is actualy on my canvas (the red line corners are invisible in canvas ofc)
Example code from Fabric.js
You have to use the "perPixelTargetFind" property of fabricjs.
This will check the mouse over the object with accuracy.
If there is graphic it will trigger the target, otherwise not.
var canvas = new fabric.Canvas('canvas');
canvas.perPixelTargetFind = true;
canvas.add(new fabric.Circle({ radius: 30, fill: 'green', top: 50, left: 100 }));
canvas.add(new fabric.Circle({ radius: 30, fill: 'green', top: 100, left: 200 }));
canvas.on('mouse:over', function(e) {
e.target.setFill('red');
canvas.renderAll();
});
canvas.on('mouse:out', function(e) {
e.target.setFill('green');
canvas.renderAll();
});
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>
I'm using fabric.js to create objects on a canvas. I have a couple of objects together in a Group. When the group is selected, an event is triggered, which creates and adds a circle, centered at the end of a line. When a selection is cleared, another event is triggered, which removes the circle.
What I don't understand is why the circle doesn't change position to the line's new end point, when I move the group, deselect it, and then re-select it.
<html>
<head>
<script type="text/javascript" src="path/to/fabric.1.4.5.js"></script>
</head>
<body>
<canvas id="c" width="800" height="600"></canvas>
<script type="text/javascript">
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
var canvas = new fabric.Canvas('c');
var circle;
var text = new fabric.Text('hello world', {
fontSize: 30,
originX: 'left',
originY: 'top',
left: 25,
top: 30
});
var line = new fabric.Line([10,10, 100,100], {
stroke: 'green',
strokeWidth: 2
});
var group = new fabric.Group([line, text], {
});
group.on('selected', function() {
circle = new fabric.Circle({
strokeWidth: 5,
radius: 28,
fill: 'rgba(200,200,200,0.4)',
stroke: '#666',
left: line.get('x2'),
top: line.get('y2')
})
canvas.add(circle);
});
canvas.add(group);
canvas.renderAll();
canvas.on('selection:cleared', function () {
group._objects.length = 2;
canvas.remove(circle);
});
</script>
</body>
</html>
Here's the same code on jsFiddle: http://jsfiddle.net/Tqmdw/
The position of your line actually doesn't change. Have a look at the groups tutorial. http://fabricjs.com/fabric-intro-part-3/#groups. In a group items are positioned relative to the groups center and the group is handled as a single entity. That means moving the group will only update the groups top and left position. You can use these new top/left values and calculate the endpoint of the line.
group.on('selected', function() {
circle = new fabric.Circle({
strokeWidth: 5,
radius: 28,
fill: 'rgba(200,200,200,0.4)',
stroke: '#666',
left: group.left + line.get('x2'),,
top: group.top + line.get('y2'),
})
canvas.add(circle);
});
I created an updated fiddle: http://jsfiddle.net/2e9B9/5/
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!