fabricjs

问题 I am using Fabric.js to create design on any product. my some product has two canvas so I want to move fabric.Text from one canvas to another and I want to drag and drop Fabric canvas object to other Fabric canvases. 回答1: I have absolutely no idea whether this is a good, bad or ugly way of doing things however I've put together a simple fiddle which achieves what you are after - the basic principle of what i've done is this: encapsulate your canvas objects within an object, where the canvas

问题 I'm having trouble using the fabric.js library with a Meteor app, and unfortunately I can't quite get past the stage of adding it to my app, much less invoking it. The easiest recreation is as follows: > mrt create test > cd test > mkdir client > curl -o ./client/all.js http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js > mrt Going to localhost:3000 shows the following console output: Uncaught TypeError: Cannot read property 'object' of undefined all.js:4074 global.fabric

问题 Is it possible to capture object:over in Fabric.js only if mouse is on the shape itself and not on the imaginary square that contains it? I have a jsFiddle demo, which contains an U shape. You can see that even if i have the pointer inside the U and not touching any of the lines, it still detects it as a object:over event. Javascript: var canvas = new fabric.Canvas("c1", { isDrawingMode: false }); canvas.loadFromJSON(objectsJson, function () { canvas.renderAll(); }); canvas.on("object:over",

问题 Fabric.js does not support editing text objects when they are within a group. How can one achieve this feature? 回答1: The solution is based on ungrouping the group of objects while maintaining their state, adding the subTargetCheck:true option as true to fabric.Group objects that contain text you'd like to edit. The ungrouping is achieved on a simulated double click event using a mousedown listener on the top level group of objects. A mousedown listener is also added to the text objects within

问题 I am using HTML5 and Fabric.js. I am uploading multiple images. But i want user can remove uploaded image. I will show you one screen shot. I want to add one remove icon on image when user clicked on image. HTML code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"> <input type="color" value="blue" id="fill" /> <select id="font"> Java

问题 I have a canvas with an addable objects, as well as Undo and Redo buttons. As you can see in my example, I'm able to undo/redo 1 time but things break; by this I mean I can add an object and remove it but if for example I move the added object and hit undo, it should move to where I had it previously but instead it disappears from the canvas. I'm using fabric.js 1.7.22. My Code: var canvas = this.__canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey', centeredScaling: true });

问题 I have a fabricjs canvas that I need to be able to zoom in and out and also change the image/object inside several times. For this I setup the canvas in the first time the page loads like this: fabric.Object.prototype.hasBorders = false; fabric.Object.prototype.hasControls = false; canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false}); canvas.defaultCursor = "pointer"; canvas.backgroundImageStretch = false; canvas.selection = false; canvas.clear(); var image =

问题 I am using webpack and babel in my development tool chain; when running the following code: import * as fabric from 'fabric'; var canvas = new fabric.Canvas('canvas'); I get the following error: _fabric2.default.Canvas is not a constructor Whereas the same code works fine if I use require('fabric'); instead of import . I tried different ways of calling import but none of them worked. My linting tool complains of the undefined fabric variable, so I would like to have it properly defined.

问题 I have a series of 4 images which I'm attempting to place at specified coordinates in fabricjs, and I'm getting them placed inconsistently sometimes when the page loads. Refreshing once or twice will usually give the correct layout. Trying to prevent this from happening. Anybody know how to solve this? Here's my code: var objects = [ { type: "image", filename : "tv.png" , x: 688, y: 184, angle: 0, zIndex: 10 }, { type: "image", filename : "polaroid.jpg" , x: 347, y: 515 }, { type: "image",

问题 Is that possible to use Fabric.js with web fonts, without attaching Cufon library and its fonts? I can easily do it with standard canvas functionality so I wonder if it's possible in Fabric. 回答1: We're planning to ditch Cufon soon, in favor of native text methods. We incorporated Cufon ~2 years back when native text methods weren't very cross-browser available (see this test of mine from back in the days). Once we drop it, it will probably be an optional module, for cases when compatibility