fabricjs

at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework . I've looked around but got more and more confused as I recognized that the development of this feature/function was a long and rocky road for the community and developers. Because of that, many solutions seems to be already outdated. But at the moment I found fabric-viewport developed by the RTSGroup on Github . The implementation was easy, but it only can zoom/control the objects in (inner of) the canvas. Not the canvas too. But I would like to zoom the canvas, too. (inner of the

Is there a way to explicitly select all the objects present at a particular instance of time. This can be easily done using mouse to select all. Is there a code-solution like a button named Select All so that clicking it would make all the fabric type objects being selected and then I could apply the changes to whole of that ActiveGroup using canvas.getActiveGroup(); and iterate over. Good question. There's no built-in method for this, but you would need to do something along these lines: var objs = canvas.getObjects().map(function(o) { return o.set('active', true); }); var group = new fabric

I would define a text box (single-line) By default, with a character size of 16 (for example) When the text gets bigger than the text box, I do not want it to wrap or the text box gets bigger, I want the text size to fit the maximum size of the text box. text. When the text returns to a smaller size, it can resume its initial size (in our example 16). Possibly manage a minimum size If you have an idea, I take :) thanks in advance Test Case : http://jsfiddle.net/Da7SP/273/ // initialize fabric canvas and assign to global windows object for debug var canvas = window._canvas = new fabric.Canvas(

Is there any approach to use Fabric.js and Redux together? Fabric.js state should be used as part of store, but it isn't immutable and can mutate itself by user canvas interaction. Any idea? Thanks. I have extracted small example from my implementation of React-Redux and Fabric.js. It works by simply getting whole fabric object by fabric.toObject(), saving it into state and revoking by fabric.loadFromJSON(). You can play around by using Redux DevTools and traveling through the state. For any case, there is also jsfiddle available: https://jsfiddle.net/radomeer/74t5y1r0/ // don't be scared,

I understand Fabric.js have built-in support on drag-n-drop within the same canvas. How can we make it work for multiple canvas? Or from an non-canvas html element e.g. an image from a table? Use canvas.observe("object:moving", function (event) {}); If event.e.clientY and event.e.clientX are outside the canvas, then: var activeObject = canvas.getActiveObject(); Store in global dragImage var activeObject.clone(function (c) { dragImage = c; }); canvas.remove(activeObject); Then in window mouse move event you can place an img with src = dragImage.src and follow the cursor. function mousemove(e){

I want to save canvas as PNG, without opening it in a new window as base64-encoded image. I used this code: jQuery("#btnPreview").click(function(){ if (!fabric.Canvas.supports('toDataURL')) { alert('Sorry, your browser is not supported.'); } else { canvas.deactivateAll(); canvas.forEachObject(function(o){ if(o.get("title") == "||Watermark||"){ canvas.bringToFront(o); } }); window.open(canvas.toDataURL('png'), ""); canvas.forEachObject(function(o){ if(o.get("title") == "||Watermark||"){ canvas.sendToBack(o); } }); canvas.renderAll(); } }); I want to make the button save the image as a PNG or

I have an application using heavily HTML5 canvas via Fabric.js . The app is written on top of Angular 1.x, and I am planning to migrate it to React . My app allows writing text and drawing lines, rectangles, and ellipses. It is also possible to move, enlarge, shrink, select, cut, copy, and paste one or more of such objects. It is also possible to zoom and pan the canvas using various shortcuts. In short, my app utilizes Fabric.js to its full extent. I couldn't find much information on how to use Fabric.js together with React, so my concern is that 1. is it possible without major modifications,