fabricjs

I'm working on a Fabric JS project to map a floor with its rooms' locations. At each room location I added an icon. I want to have a text box pop up (such as jquery tooltip) each time the mouse hover above the icon. The text box should show room information (phone number \ person \ size \ etc.) I found this google group post , but no one really described the solution beside sharing this link Step 1: Set up your watchers Step 2: Load the dialog Step 3: Figure out where the bounding rect is on the page and move the dialog. canvas.observe('mouse:over', function (e) { console.log("Everyday I'm

I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text. var t = new fabric.IText("Hello world !", { top: 100, left: 100, width: 200, height:200, backgroundColor: '#FFFFFF', fill: '#000000', fontSize: 12, lockScalingX: true, lockScalingY: true, hasRotatingPoint: false, transparentCorners: false, cornerSize: 7 }); Here is a Fiddle with my problem : http://jsfiddle.net/K52jG/4/ In this example, I want the "Hello

Sorry if someone asked the same question. I can't find any way apply filter to canvas backgroundImage. I tried to do something like here: https://stackoverflow.com/a/13541734/1777335 And my code: setBackground: function () { fabric.Image.fromURL(this.model.get('background'), (function(image){ this.canvas.setWidth(image.width); this.canvas.setHeight(image.height); image.filters.push(new fabric.Image.filters.Grayscale()); image.applyFilters(); console.log(image); this.canvas.backgroundImage = image.getElement(); this.canvas.renderAll(); }).bind(this)); } Also i tried to do this: setBackground:

I have this IText object within a parent Group object. When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull. Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group. How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work. try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox . This new class has the properties you are looking for, the controls

I am trying to perform a special action whenever the user double clicks any object located inside the canvas. I have read the docs and not found any mouse:dblclick -like event in the documentation. I tried doing something like: fabric.util.addListener(fabric.document, 'dblclick', callback); Which does trigger the dblclick event but does not give specific information about the actual object that is being clicked on the canvas. Any ideas of the most FabricJS-y way of doing this? The more elegant way is to override fabric.Canvas._initEventListeners to add the dblclick support _initEventListeners:

In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be nice). Instead, I'm using a placeholder object which is put into the object list at the old position, and then the old object is put back in the position where it was in the list using canvas.insertAt. However this is not working. See http://jsfiddle.net/rFSEV/ for the status of this. var canvasS = new fabric.Canvas('canvasS', { renderOnAddition:

I am placing Text, Image and Shapes on canvas using Fabric.js. I have made Three different Edit-Panels for all three. When user select text I want to show text panel. like wise for image and shapes. How to identify type of selected Object? canvas.getActiveObject().get('type') as simmi simmi said is correct. You can also listen to events: function onObjectSelected(e) { console.log(e.target.get('type')); } canvas.on('object:selected', onObjectSelected); I solved this issue using following code:: if(canvas.getActiveObject().get('type')==="text") { //Display text panel console.log('text panel