fabricjs

问题 I have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc. However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing. I understand that from this PR https://github.com

问题 I'm using jspdf.js to create pdf from HTML 5 canvas. However, regardless of what the contents are and how big the canvas size is, the generated file size is always 32,874 KB, even when the canvas is completey empty. Why the file size is always the same? jsPDF version is 1.1.135. My code is like this: var imgData = canvas.toDataURL("image/jpeg", 1.0); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage

问题 I'm using this script: var canvas = new fabric.Canvas('game_canvas', { selection: false }); fabric.Image.fromURL('images/bg.jpg', function(img) { img.set('left', 1024/2).set('top', 600/2).set('zindex', 0); canvas.add(img); }); fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) { img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1); canvas.add(img); }); fabric.Image.fromURL('images/player-board.png', function(img) { img.set('left', 254/2).set('top', (122/2)).set('zindex

问题 I have a problem with export fabric's canvas to url. How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported. Here's my fiddle : https://jsfiddle.net/y7pu4wn3/13/ <div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20"> <canvas id="draw-area" width="512" height="256" style=""></canvas> </div> 回答1: Your result is correct. You are getting

问题 I am trying to show certain attributes for each object on a canvas, but I am having a difficult time writing the code to do so. E.G. I want the code below to identify the difference between a shape, text, and image objects and show attributes based off the type. Attributes to console.log: for each object on canavas check to see if - Image then URL (source) and scale <= I am having a difficult time showing the source and name of the image. Text then font family, font size, color, scale Shape

问题 I have a Canvas Object with top and left attributes defined through with a previous JavaScript function but when I create a fabric Canvas object var fabricCanvas= new fabric.Canvas('mycanvas'); my HTML Canvas has top and left attributes set on 0. I have tried setting the top and left attributes after the creation of fabric Canvas object through a script but when I do this the canvas changes position but the fabric function (selection and moving functions) remain where the canvas was located

问题 Is it possible to load the Lottie animation in fabricjs canvas I have tried the following samples bodymovin.loadAnimation({ wrapper: animateElement, // div element loop: true, animType: 'canvas', // fabricjs canvas animationData: dataValue, // AE json rendererSettings: { scaleMode: 'noScale', clearCanvas: true, progressiveLoad: false, hideOnTransparent: true, } }); canvas.add(bodymovin); canvas.renderAll(); I cant able to add the animation in the fabric js canvas. if any one overcome this

问题 Is it possible to load the Lottie animation in fabricjs canvas I have tried the following samples bodymovin.loadAnimation({ wrapper: animateElement, // div element loop: true, animType: 'canvas', // fabricjs canvas animationData: dataValue, // AE json rendererSettings: { scaleMode: 'noScale', clearCanvas: true, progressiveLoad: false, hideOnTransparent: true, } }); canvas.add(bodymovin); canvas.renderAll(); I cant able to add the animation in the fabric js canvas. if any one overcome this

问题 I'm new with the FabricJS library and I used it for the following, I have a draggable object on the left side of my screen, which is only drag-able in an y direction. A function reads out the y position of this object and then it depends the height of my triangle which needs to be drawn. But after 2-3 seconds of drawing the triangle dissapears and doesn't show again.... This is my code. function drawObject() { if (being_dragged == true && y <= 440) { document.getElementById(element).style.top

问题 I have been experimenting with fabricjs lately. I am attempting to create a group structure (hierarchy) of layers similar to a raster editor like krita/gimp, conceptually. In other words, there may be groups inside of groups. From a few other questions it appears that this should be supported, but I am confused due to two seemingly inconsistent behaviors. I would appreciate it if someone could break down what assumptions I am making incorrectly. -Positioning of items in groups. After creating