In http://jsfiddle.net/SpgGV/9/, move the object and change its size. If the object state is changed, and then we do undo/redo, its previous state will be deleted when the next change comes. It makes it easier to do undo/redo. All events of canvas should be called before any element is added to canvas. I didn’t add … Read more
canvas.on(‘object:moving’, function (e) { var obj = e.target; // if object is too big ignore if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ return; } obj.setCoords(); // top-left corner if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){ obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top); obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left); } // bot-right corner if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){ obj.top … Read more
The latest version of fabric.js includes a class IText which incorporates the interaction for editing and selection of text dynamically. try the code below with the latest version of fabric.js canvas.add(new fabric.IText(‘Tap and Type’, { fontFamily: ‘arial black’, left: 100, top: 100 , }));
I may be late answering this, but in fabricjs (1.4.3) you can use the following to deselect all selected objects on the canvas. canvas.deactivateAll().renderAll(); I am using this before creating a image of that canvas. Hope it helps someone. for fabricjs 4.0 you can use: canvas.discardActiveObject().renderAll();
Since new version of fabric.js was released – you should use: canvas.remove(canvas.getActiveObject());
You want to use: canvas.setActiveObject(canvas.item(0)); In the buttons click event The number corresponds to the order in which the object was added to the canvas. See here: http://jsfiddle.net/ThzXM/1/
We had this same issue in our app of how to use Fabric.js inside of react. My recommendation is to treat fabric as an uncontrolled component. Have fabric instance that your whole app can talk to and make fabric calls and then when anything changes use .toObject() call to put the whole fabric state into … Read more
in the latest version, you will have to do something like: var canvas = new fabric.Canvas(‘myCanvas’); canvas.setHeight(500); canvas.setWidth(800); …. Your code …. canvas.renderAll(); Works fine for me.. For dynamically changing size, this works too
Good question. If you’re adding custom properties to objects, those objects are likely “special” in some way. It seems like subclassing them would be a reasonable solution. For example, here’s how we would subclass a fabric.Image into a named image. Those image objects could then have names like “Gandalf” or “Samwise”. fabric.NamedImage = fabric.util.createClass(fabric.Image, { … Read more