fabricjs

问题 I am trying to use the following suggested way to store canvas in the server: Fabric.js - how to save canvas on server with custom attributes But in my case, I am loading an image from a url like: fabric.Image.fromURL(url, function(image) { image.alt = product.skuId; image.productClass = product.productClass; canvas.add(image); }, { crossOrigin: "Annoymous" }); But when I try to store the same in the db the newer attributes are not stored. Is there a way to store custom attribute (or even

问题 I am working on fabricjs app & i need to draw a path & polygon shapes with round corner I did't get any fabric js parameter to do this & I also search but didn't get any result matching with my requirement Can anyone describe me how draw a path & polygon shapes with round corner in detail with step by step , I need to draw various shapes. eg- i need round corners at red dots as in image canvas = new fabric.Canvas('canvas'); var path = new fabric.Path('M 170.000 210.000L 217.023 234.721 L 208

问题 We're new to Fabric.js. We're using it to draw polygons on our canvas in overlay on a real scene. We need to move, to rotate and resize the polygon and then get back the veterxes coordinates. After the transformation we used the API. var originalPolyPoints = pol.get('points').map(function (p) { return {x: p.x , y: p.y }; }); This way, the coordinates are always the original but not the changed ones. How can we get the new coordinates? Tried to get the transformMatrix of the polygon, but it

问题 I want to play youtube video inside canvas,I use fabric.js and youtube-api my video tag code looks like this <video id="youtube1" width="640" height="360"> <source src="https://www.youtube.com/watch?v=V6DWnVm0Ufk" type="video/youtube" > </video> it works like expected video appears in dom but I want to add this video inside canvas too. my canvas code looks like this: canvas = this.__canvas = new fabric.Canvas('canvas'); var youtube=$('#youtube1')[0]; var video1 = new fabric.Image(youtube, {

问题 I have an application which is built on a ReactJS and uses FabricJS extensively. We plan to reuse a lot of code and build mobile apps using React-Native but I am not sure how we can integrate the FabricJS component into it. The app is something like https://www.my-wallsticker.de/wandtattoo-selber-gestalten/ I have found and used https://www.npmjs.com/package/react-fabricjs but nothing available for React-Native. What could be the solution? 回答1: You would have to use a WebView with canvas (or

问题 I am using fabricjs 1.5 and I am stuck on aligning the text in the middle of the line vertically. I am using this code to set the line height text.setProperty('lineHeight', $scope.lineHeight.current); It changes the line height of text on canvas but text always remains at the top. I want it to be in the vertically middle. Please help. 回答1: You need to use newer versions of fabricjs. 1.5 is too old. For alignment use fabric.Textbox textAlign property. DEMO var canvas = new fabric.Canvas(

问题 When rendering lines in a group, the more lines i have the blurrier the result becomes. For example in the snippet below i render 500 lines, and as you can see its not the 1px width i would expect. Why is this? is my group to big or am i making another mistake? var canvas = new fabric.Canvas('c'); var lines = []; for (var i = 0; i < 500; i++) lines.push(new fabric.Line([i * 20, 0, i * 20, 5000])); var group = new fabric.Group(lines, { selectable: false, lockMovementX: true, lockMovementY:

问题 When rendering lines in a group, the more lines i have the blurrier the result becomes. For example in the snippet below i render 500 lines, and as you can see its not the 1px width i would expect. Why is this? is my group to big or am i making another mistake? var canvas = new fabric.Canvas('c'); var lines = []; for (var i = 0; i < 500; i++) lines.push(new fabric.Line([i * 20, 0, i * 20, 5000])); var group = new fabric.Group(lines, { selectable: false, lockMovementX: true, lockMovementY:

问题 I'm working with Fabric.js, saving drawing objects to a database. We use groups quite a bit, resulting in several levels of nested drawing objects. I've created classes that match the values being sent back from the canvas object, and it's correctly binding the top-level items in my drawing. It's not binding any of the sub-items, however, and I can't figure out what's wrong. My model (some properties removed to keep it short: public class DrawingObj { public int ParentID { get; set; } //will

问题 In Fabric.js an object can be moved in the canvas by left-clicking, holding and moving the mouse. In this condition, the selected object follows the mouse's cursor and object:moving gets fired. Releasing the left mouse button exits this mode. Is there a way to change this behavior and have an object enter this mode with different events? For example, click once to have the object follow the cursor (and have the object:moving fire correctly) and then click a second time to release the object