fabricjs

问题 I have created a fabric group with a rectangle and text. finally Iam adding a custom property 'name' to group class using the below code. Iam serializing the canvas data into JSON using JSON.stringify(canvas) and sending the Json string to java and finally saving the Json string into file , custom property are also saved with the file. var rect1= createRect(104,166,250,15); var text1 = new fabric.Text('hello', { left: rect1.get('left'), top: rect1.get('top'),fontSize: 13 }); var group1=new

问题 Edit: Here I'm able to keep it in the back while selected but for some reason it's not dragable now. What might I be doing wrong? I have the ability to upload an image from my computer and then to move the image around. My problem: When I select the image, it pops forward until I deselect it. Is it possible to have it remain BEHIND the image that I have it upload behind? Please see this JSFiddle of the problem. You'll notice that if you upload an image, the image pops forward above the frame

问题 Is it possible to delete the backgroundImage in a fabric.Canvas after setting with: canvas.setBackgroundImage('img_url',function() { canvas.renderAll(); Or just go back to the standard background? To set the backgroundColor to white isn't working. Thanks for helping! Greetings Max 回答1: This is a snippet from renderAll function of fabric.Canvas ; ... if (this.backgroundColor) { canvasToDrawOn.fillStyle = this.backgroundColor; canvasToDrawOn.fillRect(0, 0, this.width, this.height); } if (typeof

问题 I'm working with Fabric.js and I would like to draw arcs on canvas. The closest shape I can find is the Circle shape. This, of course, only enables me to make a circle and nothing like an arc spanning 45° or 180°. Is there a way to accomplish this with Fabric.js? If not, is there a way I can get the underlying context and then create the arc and allow fabric to manage it? It is important that I retain the selection and scaling capabilities that Fabric.js offers. 回答1: In latest version of

问题 I am working on fabric js application & I need to increase/decrease the font size when we resize the font with mouse my tried code var canvas = new fabric.Canvas('canvas'); $(document).ready(function() { $('#text-font-size').keyup(function() { var val = $(this).val(); if (isNaN(val)) { alert('please enter number'); $(this).val(''); } var activeObject = canvas.getActiveObject(); activeObject.fontSize = val; canvas.renderAll(); }); $('#add-text-btn').click(function() { if ($('#text-font-size')

问题 My original size of the canvas is 800X700 . I am using clipTo to work in a selected portion of a canvas: var rect = new fabric.Rect({ left: 100, top: 50, fill: '#fff', width: 376, height: 602, strokeWidth: 0, selectable: false }); rect.set({ clipFor: 'mainCanvas', }); I make sure all the images and text fall within this portion of the canvas. What I want to Do: I want to scale up this portion of canvas to a width and height of 1500X2400 so that it can be used for printing I am using the below

问题 I have this IText object within a parent Group object. When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull. Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group. How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work. 回答1: try use latest fabricjs version ( 1.6.0.rc1 ) and instead of

问题 How can an object be constrained to being resized/scaled only within the bounds of the canvas (or another object in my case) when using Fabric.js? Currently, I'm handling the object:scaling event: // Typescript being used; onObjectScaling = (event): boolean => { // Prevent scaling object outside of image var object = <fabric.IObject>event.target; var objectBounds: BoundsHelper; var imageBounds: BoundsHelper; object.setCoords(); objectBounds = new BoundsHelper(object); imageBounds = new

问题 I want to trigger the mouse:over event only when the user hovers over an elements for more than a specific set interval (for example 200ms). Currently I have used this example for adding the event "instantly": http://fabricjs.com/hovering What is the best way to add a delay before that event is triggered? Regards, Alex 回答1: In your case I think you can use setTimeout function inside the mouse:over handler. This way you can put some delay before executing the code. So what I did: 1) Use

问题 I want to load different shapes in FabricJS based Canvas using loadSVGFromURL(), but can't. Documentation is also not complete on this. I just want a complete example. I can load it from string, but string creates spaces which creates problems when rendering. Here is my code: var canvas = new fabric.Canvas('canvas'); fabric.loadSVGFromURL('BlueFlower.svg', function (objects) { var SVG = fabric.util.groupSVGElements(objects, options); canvas.add(SVG).centerObject(SVG).renderAll(); SVG