Adding a border to circle object fabricjs - javascript

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>

Related

Why jCanvas draws poor quality circle on small sizes of canvas

Just want to say, I don't use CSS, but on small size canvas quality of circle very poor.
Example: jcanvas https://jsfiddle.net/tkdn2rv6/25/
For example, everything is fine on the konvajs: konva https://jsfiddle.net/qup9s57y/23/
Why is the image so blurry?
I would like to use jcanvas, since it is smaller in size and use jQuery.
You must use detectPixelRatio
Solution:
$('canvas').detectPixelRatio(function(ratio) {
$('#canvas').drawArc({
x: 20, y: 20, radius: 15, strokeStyle: '#000', strokeWidth: 1,
});
});
var circle = new Konva.Circle({
x: 20, y: 20, radius: 15, stroke: '#000', strokeWidth: 1
});
var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container', width: 40, height: 40}).add(layer);
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>
<div id="container"></div>
<canvas id="canvas"></canvas>
I tried to reproduce your issue by putting both into one common snippet and the quality looks the same:
$('#canvas').drawArc({
x: 20, y: 20, radius: 15, strokeStyle: '#000', strokeWidth: 1,
});
var circle = new Konva.Circle({
x: 20, y: 20, radius: 15, stroke: '#000', strokeWidth: 1
});
var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container', width: 40, height: 40}).add(layer);
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>
<div id="container"></div>
<canvas id="canvas"></canvas>

How to set canvas origin to center in fabricjs?

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.

Fabric JS Replace Objects with Same Item(ID)

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

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/

fabric.js Group members' properties don't update?

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/

Categories

Resources