fabricjs

问题 Applying a filter to an image object that occupies the whole canvas can take a couple seconds with larger images and I want to display a loading screen while this is happening but the .show() method isn't firing until after the filter has been applied. Current method that applies the filter: applyFilter: function (index, filter) { var obj = designer.baseImage, $loading = $('#loading-canvas'); console.log('show loading'); $loading.show(); obj.filters[index] = filter; obj.applyFilters(function

问题 I have added background image to canvas using css. But when converting it into png using canvas.toDataURL() , its not showing background image. It seems like its not parsing css background image. var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); var canvas = document.getElementById("canvas"); d3.select('canvas') .attr('style', 'background-image:url("chart.png");background-position:50%;background-repeat:no-repeat'); var ctx = canvas.getContext("2d"); var

问题 I want to have the possibility to draw rectangle only after clicking a button . Javascript : $("#select").click(function() { DrawingRectangle = false; }); $("#draw").click(function() { DrawingRectangle = true; draw(); }); function draw() { if (DrawingRectangle == true) { canvas.on('mouse:down', function(o) { var pointer = canvas.getPointer(o.e); isDown = true; origX = pointer.x; origY = pointer.y; rectangle = new fabric.Rect({ left: origX, top: origY, fill: 'transparent', stroke: 'red',

问题 I have added a clipping section in my canvas. and I am adding multiple object on this. The problem is as soon as i add the second object, the first object get invisible. explained in this var pug = new fabric.Text("Hi ", { angle: 0, width: 500, height: 500, left: 245, top: 35, scaleX: 0.3, scaleY: 0.3, clipName: 'pug', clipTo: function(ctx) { ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.rect( 100, 100, 200, 200 ); clipRect1.render(ctx); ctx.strokeStyle = "red"; ctx.stroke(); ctx

问题 I need to draw a 3d house model (walls only) from a 2d path or array (explained later) I receive from FabricJS editor I've built. The type of data sent from 2d to 3d views doesn't matter. My first (and only quite close to what I want to get) attempt was to create the array of 1s and zeros based on the room I want to draw, and then render it in ThreeJS as one cuboid per 'grid'. I based this approach on this ThreeJS game demo. So if the array look like this: var map = [ //1 2 3 4 5 6 7 8 [1, 1,

问题 Can we do copy(Ctrl+C) and paste(Ctrl+V) the image from User system(desktop/any folder) to canvas using fabric.js. I have seen the copy and paste program inside the canvas, I have found this Example while searching google but didnt find any relevant example for desktop to canvas. Here is the snippet for copy and paste function onKeyDownHandler(event) { //event.preventDefault(); var key; if(window.event){ key = window.event.keyCode; } else{ key = event.keyCode; } switch(key){ ////////////// //

问题 I am trying to do hole in the polygon using fillRule = 'evenodd' in fabric.js globalCompositeOperation won't work for me, because I need to see shape in the polygon hole like this Here is my code: fiddle There are 2 examples: Fabric.js 2 polygons (doesn't work) native html5 canvas 2 polygons (works) When I set fillRule: 'evenodd' for fabric.js polygon, it is going to the fabric function and it's setting context fill to 'eveneodd' _renderFill: function(ctx) { ... if (this.fillRule === 'evenodd

问题 I want to wrap images and text on sample papercup. When a image is uploaded on canvas, I want to wrap it around the background image of papercup whose position is fixed at all times. I am using Fabric JS for the html5 canvas tool. Here is my code but there it only shows 1pixel of image, also when I click the image to drag and drop ,it VANISHES. HTML: <div id="container"> <input type="file" id="imageLoader" name="imageLoader" /> Remove:<input type="button" value="remove" id="imageRemove" name=

问题 So I've deduced that I can add SVG graphics to the canvas by using: fabric.loadSVGFromURL('img1.svg', function(objects, options) { var obj1 = fabric.util.groupSVGElements(objects, options); canvas.add(obj1); }); fabric.loadSVGFromURL('img2.svg', function(objects, options) { var obj2 = fabric.util.groupSVGElements(objects, options); canvas.add(obj2); }); Suppose I now want to delete one or both of those. How can I do that? 回答1: In fabricjs I use different method to delete object in canvas.

问题 I want to check every 5 seconds if my Canvas element is blank. I followed the solution from the link below, but its not working. how-to-check-if-a-canvas-is-blank The above link works for plain canvas element BUT NOT for the one that fabric.js creates. Here is the Fiddle that works without Fabric.js Here is my Fiddle that DOES NOT WORK when Fabric.js creates the canvas. 回答1: it is because you have given background color as white, if you remove that it works 来源： https://stackoverflow.com