Develop Reference

Detect collision between two text object (not the bounding box)

I'm trying to check for a collision between 2 text objects and using the intersectsWithObject. It's working but it's taking the bouding rect into account. Is it possible to check on pixel level?
Current behaviour:
Wanted behaviour:
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);
const text = new fabric.Textbox('some text', {
width: 300,
fontSize: 70,
top: 120,
left: 100
});
const text2 = new fabric.Textbox('some more text', {
width: 350,
fontSize: 50,
top: 200,
left: 20,
})
if (text.intersectsWithObject(text2, true, true)) {
text.set('fill', 'red');
}
else {
text.set('fill', 'black');
}
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
canvas.add(text);
canvas.add(text2);
https://jsbin.com/menadejato/edit?js,console,output

Fabricjs - How to detect total width/height of canvas where objects exist

So I want to save the canvas based on scale 1 and I want to include all existing/visible objects.
So right now, my canvas is 600x400 and if I were to save it, it would only save what's inside that 600x400, and it respects zoom level (a higher zoom will see less things, a lower zoom will see more things but smaller).
I've gotten around this by running this code:
let zoom = this.canvas.getZoom();
this.canvas.setZoom(1);
let url = this.canvas.toDataURL({width: 1000, height: 700, multiplier: 1});
this.canvas.setZoom(zoom);
window.open(
url,
'_blank' // <- This is what makes it open in a new window.
);
What this does is save the image as 1000x700, so stuff that were past 600px but under 1000 still gets saved.
However, this is hard coded. So I was wondering if there was an existing function or a clean/simple way to detect where all the objects are in and returns the full size (width and height).
fiddle: http://jsfiddle.net/1pxceaLj/3/
Update 1:
var gr = new this.fabric.Group([], {
left: 0,
top: 0
});
this.canvas.forEachObject( (o) => {
gr.add(o);
});
this.canvas.add(gr);
this.canvas.renderAll();
console.log(gr.height, gr.width); // 0 0
Solution
Using group was the best idea. Best example: http://jsfiddle.net/softvar/mRA8Z/
function selectAllCanvasObjects(){
var objs = canvas.getObjects().map(function(o) {
return o.set('active', true);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas._activeObject = null;
canvas.setActiveGroup(group.setCoords()).renderAll();
console.log(canvas.getActiveGroup().height);
}

One possibility would be to create a kind of Container using a fabricjs group and adding all created objects to this container.
I updated your fiddle here: http://jsfiddle.net/1pxceaLj/4/
Thus, you could just use group.width and group.height, perhaps adding a little offset or minimum values, and there you are having dynamical value to pass into toDataUrl even when having a smaller canvas.
code:
var canvas = new fabric.Canvas('c');
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 10,
offsetY: 10,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "#FF0000",
stroke: "#000",
width: 100,
height: 100,
strokeWidth: 10,
opacity: .8
});
var rect2 = new fabric.Rect({
left: 800,
top: 100,
fill: "#FF0000",
stroke: "#000",
width: 100,
height: 100,
strokeWidth: 10,
opacity: .8
});
rect.setShadow(shadow);
//canvas.add(rect);
//canvas.add(rect2);
var gr = new fabric.Group([ rect, rect2 ], {
left: 0,
top: 0
});
canvas.add(gr);
function save()
{
alert(gr.width);
alert(gr.height);
let zoom = canvas.getZoom();
var minheight = 700;
canvas.setZoom(1);
let url = this.canvas.toDataURL({width: gr.width, height: gr.height > minheight ? gr.height : minheight, multiplier: 1});
canvas.setZoom(zoom);
window.open(
url,
'_blank'
);
}

Fabric JS Custom cursor style

I need to change the cursor types as "Handwriting" on hover shapes...
var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}
I tried this but not working

You can change the hoverCursor directly to the single shape, or globally to the entire canvas. Take a look to the snippet below.
var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';
var rect = new fabric.Rect({
left: 50,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
var rect2 = new fabric.Rect({
left: 180,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();
var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
// pointer for the selected shape
hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();
p{font-family:'arial'}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>
<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>

Surendhar,
To change cursor over the shape you need to defined as:
canvas.hoverCursor = 'cursor type'
This is a list of cursors
If you need custom cursor you have to create div element on top the fabric canvas with custom cursor. When you have event 'mouseover' the shape just specified canvas.hoverCursor = 'none', and show custom one.
You can check this fiddle it is simple example of custom cursor. You have to revisit this code in order to work without refreshing of custom cursor. It is all about mouse-over events of custom cursor. You have to disable mouse-over event of each div element of custom cursor.

For fabric 4.6, besides the default cursors, also be able to set custom cursor with png:
const canvas = new fabric.Canvas('c');
const cursorUrl = 'https://ossrs.net/wiki/images/figma-cursor.png';
canvas.defaultCursor = `url(" ${cursorUrl} "), auto`;
canvas.hoverCursor = `url(" ${cursorUrl} "), auto`;
canvas.moveCursor = `url(" ${cursorUrl} "), auto`;
CodePen

Here's a simple way to customize the cursor and create a hand grab effect when moving an object.
this.canvas = new fabric.Canvas('canvas', {
defaultCursor:'default',
hoverCursor: 'grab',
moveCursor:'grabbing',
selection: true,
backgroundColor: '#ffffff',
});
Here you find the list of all cursors
https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=alias

To change the cursor of a fabric.js object, you can set the hoverCursor or moveCursor to your own image.
E.g:
object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});

Can i set inside stroke in fabric js

I am working on a fabricjs application & i need to set a inside stroke to object, it means apply stroke to a object without increase it's size.
eg if i apply strokeWidth 20 to 100*100 rect then it's size is also increase but i want if stroke is apply to object then size will also remain same
var recta = new fabric.Rect({
left: 10,
top: 10,
fill: '#000',
width: 100,
height: 100,
});
var rectb = new fabric.Rect({
left: 150,
top: 10,
fill: '#000',
width: 100,
height: 100,
});
canvas.add(recta, rectb);
rectb.set('stroke', '#f00');
rectb.set('strokeWidth', 20);
canvas.renderAll();
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas style="border:#000 1px solid" id="design-canvas" width="500" height="400">
<script type="text/javascript">
canvas = new fabric.Canvas('design-canvas');
</script>
Is there is any way or trick to apply stroke without increase size
Thanks in Advance

Assuming it'd just be for rectangles, The best way would likely be too attach 4 lines which you update the positions based off of that rectangles x, y, width and height. You can then set the stroked width of those lines separately.
The other way would be too simply resize the owning element. Look at this JSFiddle.
var canvas = new fabric.Canvas('c', { selection: false });
var circle, isDown, origX, origY;
canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 5,
stroke: 'red',
selectable: false,
originX: 'center', originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({ radius: Math.abs(origX - pointer.x) });
canvas.renderAll();
});
canvas.on('mouse:up', function(o){
isDown = false;
});

Rect with stroke, the stroke line is mis-transformed when scaled

I have got a lot of helps from this site and contributors here, thanks. Now I have a question about the Rectangle in Fabric.js with stroke, as I used it as kind of placeholder for images and text, when I scaled it, the border line width is scaled too, I think it's kind a problem as I want to keep the border width not changed.
var canvas = new fabric.Canvas("c1");
var el = new fabric.Rect({
originX: "left",
originY: "top",
left: 5,
top: 5,
stroke: "#ccc",
strokWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6
});
canvas.add (el);
canvas.renderAll ();
See example here http://jsfiddle.net/9yb46/, try scale it horizontally. And a image is here too, and see the left border and right border width, supposed as same as top and bottom border, but not:

This can be done so that you can scale independently.
In the scaling event check the width, height and scale factors, set the height and width to the new effective values and reset the scaleX and scaleY.
This quite probably will break other things that are scaled with the object so you'd have to handle those attributes in a similar fashion.
Demo Fiddle.
var canvas = new fabric.Canvas("c1");
var el = new fabric.Rect({
originX: "left",
originY: "top",
left: 5,
top: 5,
stroke: "rgb(0,0,0)",
strokeWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6
});
el.on({
'scaling': function(e) {
var obj = this,
w = obj.width * obj.scaleX,
h = obj.height * obj.scaleY,
s = obj.strokeWidth;
obj.set({
'height' : h,
'width' : w,
'scaleX' : 1,
'scaleY' : 1
});
}
});
canvas.add (el);
canvas.renderAll ();

First of all you have miss-typed the name of the property in your fiddle : strokWidth - e is missing. But this is not the cause of the problem since the default value for the strokeWidth is 1.
The scaled stroke issue is the expected behavior and what you ask to do is not. Anyway, before you check my code, read here and here and maybe some more here.
Then try this code to help with your needs, this will work perfectly only if you keep the scale ratio of your rectangle as 1:1 (scaleX = scaleY).
This is jsfiddle:
var canvas = new fabric.Canvas("c1");
var el = new fabric.Rect({
originX: "left",
originY: "top",
left: 5,
top: 5,
stroke: "rgb(0,0,0)",
strokeWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6
});
el.myCustomOptionKeepStrokeWidth = 1;
canvas.on({
'object:scaling': function(e) {
var obj = e.target;
if(obj.myCustomOptionKeepStrokeWidth){
var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth / ((obj.scaleX + obj.scaleY) / 2);
obj.set('strokeWidth',newStrokeWidth);
}
}
});
canvas.add (el);
canvas.renderAll ();

Fabricjs now has a strokeUniform property on fabric.Rect that can be used to prevent the stroke width from mis-transforming.
When you set strokeUniform to false it will scale with the object if true it will match the pixel size of the stroke width.
var el = new fabric.Rect({
originX: "left",
originY: "top",
left: 5,
top: 5,
stroke: "#ccc",
strokWidth: 1,
fill: 'transparent',
opacity: 1,
width: 200,
height: 200,
cornerSize: 6,
strokeUniform: true
});