fabricjs

问题 I have a lot of SVG images, with filter-animations defined inside of them. To describe the problem I made jsFiddle: http://jsfiddle.net/kinos/3vhtmsy5/47/ You can see there inline SVG, which is blinking with red alarm filter and fabric.js canvas with loaded SVG without blinking. HTML (Inline SVG takes too much place to add it here): <div id="svg"></div> <canvas id="nativeCanvas"></canvas> Javascript: var canvas = new fabric.Canvas('nativeCanvas', {width: 1000, height: 600}); fabric

问题 I am having trouble changing the color of a small png on the canvas in Fabric.js. In my research, I found that I could use new fabric.Image.filters.Tint() to modify the color of an image in the way that I was looking to. However, there is no Tint() constructor in v2 of Fabric. According to this page, Tint() is now part of the BlendColor() filter. I have tried various things with BlendColor() , but I have yet to get it to work. Any advice on how to use BlendColor() or some other filter to

问题 My code is canvas.clipTo = function (ctx) { ctx.beginPath(); for (var i = 0; i < totalPrintArea; i++) { ctx.save(); ctx.fillStyle = 'rgba(51,51,51,0)'; ctx.rect(clipLft[i], clipTp[i], clipW[i], clipH[i], 'rgba(51,51,51,1)', clipRtn[i]); ctx.stroke(); ctx.restore(); } ctx.closePath(); ctx.clip(); canvas.calcOffset(); }; canvas.renderAll(); I am taking values from the red dotted box and apply to clip where multiple masks are generating. My issue is its taking all properties but not rotation for

问题 i'm trying to replace an SVG from a group (or delete and add a new one) but it's not working. Those are the ways I already tried: var group = new fabric.Group([svg, text], {options}); canvas.remove(svg); // not working group.getObjects()[0] = my_new_svg; // not working group.forEachObject(function(o) { // not working if (is_svg_object) { canvas.remove(o); } }); I been using version 1.6.4 and it's working really fine. But now, i'm migrating to the latest release 1.7.17 and have this issues. I

问题 I want to multiply each point with transform matrix to get updated points but how to do it? Below code is on how to calculate transform matrix, <!--fabric js --> console.log("Matrix :"+polygon.calcTransformMatrix()); 来源： https://stackoverflow.com/questions/38692570/how-to-multiply-each-point-with-objects-transform-matrix

问题 In fabric-js, i am making Group of Rect and text field and then adding it to the canvas. i am using following code , but can i change the Text of text field once it is added in canvas . I have made Fiddle Please Check, http://jsfiddle.net/HAb4N/5/ var canvas = new fabric.Canvas('c'); var Bar = new fabric.Text('Bar', {selectable: false, top: 50, left: 10}); var rect = new fabric.Rect({width: 100, height: 100, left: 100, top: 100, fill: 'red'}); var group = new fabric.Group([rect, Bar],

问题 I'v seen so many tutorials on internet how to do canvas.loadFromJSON() which the parameter is using JSON.stringify(canvas). But what if i want to make a fabric.Object by some function which using a JSON data as parameter which produced by fabric.Object.toJSON(). Is it possible? if it is not possible, so what is the purpose of fabric.Object.toJSON(), can't find it so useful on the official fabricjs documentation. Basically i just need to saving each object of fabric.Group, complete with it

问题 I have a panel for creating something using canvas fabric js. Canvas has many placeholders like a rectangle and I want to add images in that particular area. I am making that area clipped so that the image does not leave that area. Now everything is working fine except that the clipping area does not set angle (Rotate is not working) using canvas instance. Here is my code: var clipByName = function (bindClip) { this.setCoords(); var clipRect = findByClipName(this.clipName); var scaleXTo1 = (1

问题 I'm using fabric.js. I would like to get the dimensions of the rectangle (is "bounding box" the correct term?) that exactly contains the text (represented by the red box below). The default fabric.js box has padding even if I change padding to 0. I tried to get the context from the fabric canvas and then call .measureText() but it didn't give the full information I needed for a bounding box. EDIT: It seems there are several components of the IText object: the container, the selection area,

问题 I am using a customized textbox which should maintain the same width for a textbox while splitting a long word into a new line (I have modified the solution initially proposed by one of the library's maintainers). You can find the code in the following link. The _wrapLine function is overridden. https://jsfiddle.net/njofce/0qfb3snm/ The problem is, when the word is too long, it splits into lines, but the cursor is not correctly positioned. Any ideas to fix this? Thanks in advance 来源： https:/