Develop Reference

How can I zoom in Fabric JS on mobile devices?

I can zoom-in and zoom-out using a computer inside the canvas. However, I cannot zoom-in and zoom-out on mobile devices (smartphone, tablet, etc.). When I looked at the documentation, I found the "touch: gesture" method, but I could not adapt it to my code and execute it. How can I do that? Below I add the code I use.
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('https://i.hizliresim.com/iBHC0t.jpg', canvas.renderAll.bind(canvas));
canvas.selection = false;
//var uniqid = "0";
var uniqids = 0;
$("#door").on("click", function(e) {
rect = new fabric.Rect({
id:uniqid,
left: 40,
top: 40,
width: 35,
height: 50,
fill: 'blue',
stroke: 'blue',
strokeWidth: 5,
strokeUniform: false,
hasControls : true,
});
var uniqid = uniqids.toString();
var text = new fabric.Text(uniqid, {
fontSize: 30,
originX: 'center',
originY: 'right'
});
var group = new fabric.Group([ rect, text ], {
left: 0,
top: 100,
});
canvas.add(group);
canvas.add(rect);
uniqids++;
});
//*****************************
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.setZoom(zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
})
//***************************************
$("#save").on("click", function(e) {
$(".save").html(canvas.toSVG());
});
$('#delete').click(function() {
var activeObject = canvas.getActiveObjects();
canvas.discardActiveObject();
canvas.remove(...activeObject);
});
$("#btnResetZoom").on("click", function(e) {
canvas.setViewportTransform([1,0,0,1,0,0]);
});
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
var shiftKeyDown = true;
var mouseDownPoint = null;
canvas.on('mouse:move', function(options) {
if (shiftKeyDown && mouseDownPoint) {
var pointer = canvas.getPointer(options.e, true);
var mouseMovePoint = new fabric.Point(pointer.x, pointer.y);
canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint));
mouseDownPoint = mouseMovePoint;
keepPositionInBounds(canvas);
}
});
/*
canvas.on('mouse:over', function(e) {
e.target.set('fill', 'red');
canvas.renderAll();
});
*/
#c {
background-color: grey;
margin-top: 10px;
}
button {
padding: 10px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="door">Door</button>
<button id="delete">Delete Door</button>
<button id="save">Save</button>
<button id="btnResetZoom">Reset Zoom</i></button>
<p>Save bastıktan sonra altta SVG dosyası oluşur</p>
<br>
<canvas id="c" width="800" height="800"></canvas>
<br>
<p class="save">
</p>

Thank you for your question. I encountered the same issue once and I figured it out very easily.
However, I cannot zoom-in and zoom-out on mobile devices (smartphone, tablet, etc.).
Did you run Demo for touch events on your smartphone or tablet?
Then as you can see, there's no need to add some custom code for the pinch zoom or rotate. It automatically enables you to use those features.
The main point is, you should use the custom version of Fabric with touch events enabled.
It is just fabric_with_gestures.js. I also used prism.js together.

layer system in fabric.js canvas

I am designing business card designer application with fabric.js canvas in this application i need a system for managing objects z-index and for that i created two buttons for sending selected object in back and front its working fine but in all my designs i have a background image on which all text and objects placed when i send a object back it send back under that BG image how can stop that i mean i want that BG image to always in last position
preview of application
Code i am using now to send object in front and back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://images2.alphacoders.com/147/147320.png', function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
width: canvas.width,
height: canvas.height
});
canvas.setBackgroundImage(oImg).renderAll();
});
canvas.add(new fabric.Circle({
left: 50,
top: 50,
radius: 50,
stroke: 'red',
fill: 'yellow'
}))
canvas.add(new fabric.Rect({
left: 50,
top: 50,
height: 150,
width:150,
stroke: 'red',
fill: 'green'
}))
var sendSelectedObjectBack = function() {
selectedObject = canvas.getActiveObject();
if(selectedObject)
canvas.sendToBack(selectedObject);
canvas.deactivateAll();
canvas.renderAll();
}
var sendSelectedObjectToFront = function() {
selectedObject = canvas.getActiveObject();
if(selectedObject)
canvas.bringToFront(selectedObject);
canvas.deactivateAll();
canvas.renderAll();
}
canvas{
border:2px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<button onclick='sendSelectedObjectBack();'>Send back</button>
<button onclick='sendSelectedObjectToFront();'>Bring Front</button>
<canvas id='c' width='400' height='400'></canvas>
Set your background using canvas.setBackgroundImage(obj), then it will stay ion back all the time.

First Option
Use canvas.setBackgroundImage(obj)
Second Option
If you don't want to set backgroundImage
You can do it after you send back your selected object, you need to again send your BG object to back.
Try this.
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject); //this will send selected object to back.
// Now loop through all your obj
canvas.forEachObject(function (obj) {
// get your background with id or any other property
if (obj && obj.id.indexOf('BG_') > -1) {
canvas.bringToBack(obj, true); // this will send your BG always at back
}
});
}

fabric.js: bind event to background image

I'm trying to bind an event to a background image:
var imgInstance = fabric.Image.fromURL(path, function(oImg) {
oImg.on("selected", function() {
alert();
});
canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), {
top: 0,
left: 0
});
oImg.on("selected", function() {
alert();
});
});
I can get it work. I'm trying to bind mouse events to handle drag, so i can move the image when it's bigger than the canvas, like background-cover css property.
Thoughts?
Thanks guys!
SOLUTION:
var DragStart = false;
canvas.on('mouse:down', function(options) {
if (!options.target) {
DragStart = true;
}else {
DragStart = false;
}
});
canvas.on('mouse:move', function(options) {
if (DragStart) {
var bounds = getBounds(options.e); // validate boundaries between image and canvas
canvas.backgroundImage.top = bounds.y;
canvas.backgroundImage.left = bounds.x;
canvas.renderAll();
}
});

It doesn't seem like you can add events to the background image... but the canvas does emit events and if you click the canvas and no target is set then they must be clicking the background. Background image are not forced to take up the whole background but I'm not sure reasons to not make it take up the whole background.
You do get the mouse event passed in though so if the background image does not take up the whole background you could do that math and figure out where they clicked.
window.canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(o) {
canvas.setBackgroundImage(o, canvas.renderAll.bind(canvas), {
top: 0,
left: 0
});
});
canvas.on('mouse:down', function(options) {
if (!options.target) {
console.log('target is null')
}
});
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

FabricJS canvas on drag over event fires after drop event

Have such code :
var $canvas = $("#canvas");
var canvas = new fabric.Canvas('canvas', {
hoverCursor: 'pointer',
selection: false
});
var rect1 = new fabric.Rect({
width: 200,
height: 100,
left: 0,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
canvas.add(rect1);
$canvas.droppable({
drop: dragDrop,
over: enterIn,
});
function enterIn(e, ui) {
event.preventDefault();
rect1.width = 400;
}
function dragDrop(e, ui) {
var element = ui.draggable;
var imgInstance = new fabric.Image(element.data("image"), {
left: x,
top: y,
});
canvas.add(imgInstance);
}
Problem:
rect1 width change is applied only after drop on canvas.
But I tested that enterIn function is working fine.
Could you advise something?

using fabric.js ,increase fontSize of canvas text on button click

i am using fabric.js to work on canvas . i have created text on canvas .now,onclick of button i want to increase font-size .
canvas.set({fontSize,40});
this is not working ? any other method .i have created fiddle please Check
var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
left: 100,
top: 100,
fill: 'navy'
});
canvas.add(text);
document.getElementById('textinput').addEventListener('change', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setText(e.target.value);
canvas.renderAll();
});
document.getElementById('btn').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
alert('button clicked');
if (!obj) return;
obj.set(fontSize,40);
canvas.renderAll();
});

Here is a working code,
var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
left: 100,
top: 100,
fontSize: 80,
fill: 'navy'
});
canvas.add(text);
document
.getElementById('btn')
.addEventListener('click', function (e) {
canvas.getActiveObject().set("fontSize", "30");
canvas.renderAll();
});

First of all, I was able to make this work by changing
obj.set('fontSize',40);
to
obj.setFontSize(40);
Second, I think that it is not the fontSize of your object that is changed when you resize it, but its scaleX and scaleY. Hope this helps.