fabricjs

is it possible to change the dimensions of the controls frame around a clipped object? I use "clipTo" to apply a SVG mask to an image. The problem is that the clipped image still has the dimensions and the centerpoint of the original image. I need a solution to get a clipped image that has the dimensions an the centerpoint af the SVG masked I used for clipping. Cheers, Robster 来源： https://stackoverflow.com/questions/22622618/change-dimensions-of-controls-frame-around-clipped-object

hi im trying to upload an image and put it as canvas background. code snippet: function handleMenuImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.src = event.target.result; canvas.setWidth(img.width); canvas.setHeight(img.height); canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); //set the page background menuPages[currentPage].pageBackground.src = img.src; canvas.backgroundImageStretch = false; } reader.readAsDataURL(e.target.files[0]); } the problem is that the canvas not showing the background. i can see the canvas

Befor posting this I've been looking up in here as in many other places, but I can get to have this working fully. All I need is to be able to save some custom properties in all the shapes. The properties are : uuid, and rt_attributes. Therefore, as by manual I added this code : fabric.Object.prototype.toObject = (function(toObject) { console.log(toObject) return function() { return fabric.util.object.extend(toObject.call(this), { uuid: this.uuid, rt_attributes: this.rt_attributes }); }; })(fabric.Object.prototype.toObject); which does work fine, up to a certain degree. the problem comes when

Im trying to add a custom attribute to a fabric js object that i have: var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2), strokeWidth: 1, stroke: 'rgb(255,2,2)', fill: '', selectable: false }); so thats my rectangle im trying to add and i want to pass a name or id in it to be able to identify it later when i get the canvas object and convert it to a json. I have tried doing var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2),

https://jsfiddle.net/gislef/Lvfpq57h/ To make this editor I took as a basis the kitchensink text editor, I consulted the fabric js documentation about IText and saw some isolated examples in Jsfiddle. I have two questions: How do I select letters and format only that was selected within the text? How do I get to select the three options simultaneously the text decoration: underline, line-through and overline? Current code: radios5 = document.getElementsByName("fonttype"); // wijzig naar button for(var i = 0, max = radios5.length; i < max; i++) { radios5[i].onclick = function() { if(document

I have a very basic application that let's you create shapes and connect them with a line. To do that you would do the following. Example 1. Click new animation 2. add rectangle 3. add child 4. add circle You can move the shapes around , drag, and resize. I was wondering if it is possible to add a animation between two objects. So for example a small round circle ball would animate on the line between two objects. I have checked out demos on animation page in fabric js but not sure if it is possible to do from object b. Here is the FIDDLE . I don't know if you can use the built in animation

I'm trying to use fabric.js with Typescript and Webpack aside some other modules in a Laravel 5.4 application that work fine in the browser. @types/fabric ist installed and Typescript behaves correct. New to Typescript as well as Webpack i tried some variants with no success. The problem result.js:198 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_fabric___default.a.Canvas is not a constructor Variant A code.ts import fabric from "fabric"; const canvas = new fabric.Canvas('my-canvas'); result.js var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__default.a.Canvas('my-canvas'); WEBPACK

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", function () { console.log("object over"); }); canvas.on("object:out", function () { console.log(