fabricjs

问题 Is there a way to layer objects on a Fabric.js canvas via the official API? Right now the only way I have found to do it is to manually iterate through the canvas._objects and reorder them so that they get drawn in a specific order. Is there a better way to do this that doesn't (potentially) break the object? 回答1: [Edit] I've corrected my info below (my bad, I was originally thinking of the KineticJs api). FabricJS has these API methods that change the z-index of objects: canvas.sendBackwards

问题 I'm drawing n rectangles on a canvas. The rectangles are draggable and scalable. I want to prevent them from overlapping or intersecting. The best case is, if they just snap to each other. I figured out to check the intersection. In my example I set the opacity of touching objects to 0.1. Coincidentally in my attempt to solve this problem, my objects cant be released when they touch another object. See http://jsfiddle.net/gcollect/jZw7P/ It's because of line 91, where the alert is not

问题 I've edited an SVG with inkscape : <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="svg2816" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <defs id="defs2818"></defs> <metadata id="metadata2821"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype

问题 I'm able to get the jquery response on the triggering but the fabric canvas is not acting on the event. I expect this fiddle to deselect the IText element: fiddle I know the fabric canvas got a trigger event, but it's not working too. var canvas = new fabric.Canvas("c"); var test = jQuery("#c"); test.on("mouse:down", function (){ alert("you clicked me"); canvas.renderAll(); debugger; }); canvas.on({"mousedown": function() { alert("you clicked me too"); }}); $("#testClick").click(function() {

问题 The initialize method is called but render method is not. I read about subclassing on the fabricjs website and looked at that demo. I really don't understand what is missing in my code. var CustomCircle = fabric.util.createClass(fabric.Object, { type: "customCircle", initialize: function (options) { this.callSuper('initialize', options); }, _render: function (ctx) { ctx.beginPath(); ctx.arc(100, 250, 50, 0, 2 * Math.PI, false); ctx.fillStyle = 'green'; ctx.fill(); ctx.lineWidth = 5; ctx

问题 I trying adjust canvas for each resolution, so I first using css and put medias screens for each resolution. @media screen and (min-width: 320px) { #c { -webkit-transform : scale(0.38); -webkit-transform-origin : 0 0; } https://jsfiddle.net/qj3oyzs8/ It work for me, but all object not drag, resize or rotable properly. One solution is apply zoomOut and zoomIn, eg: http://jsfiddle.net/Q3TMA/662/ Now I need help for know How capture resolution for open correctly canvas scale in the browser EDIT

问题 I trying adjust canvas for each resolution, so I first using css and put medias screens for each resolution. @media screen and (min-width: 320px) { #c { -webkit-transform : scale(0.38); -webkit-transform-origin : 0 0; } https://jsfiddle.net/qj3oyzs8/ It work for me, but all object not drag, resize or rotable properly. One solution is apply zoomOut and zoomIn, eg: http://jsfiddle.net/Q3TMA/662/ Now I need help for know How capture resolution for open correctly canvas scale in the browser EDIT

问题 Previously I was using the Line class in FabricJS to allow users to draw lines on a canvas. I now need to implement curved lines, but as Fabric's Line class doesn't support quadratic curves I have re-written my code to use the Path class instead. Previously when drawing a Line the x1, y1, x2, and y2 values would update automatically if the line was moved on the canvas which made it easy to update the position of the start and end anchor points that I had created (just rectangles on the canvas

问题 In Fabric.js we have Object modified events like object:modified. Do we have similar event for the entire canvas. Actually I am trying to implement undo and redo features. I am saving the canvas as JSON if something happens on it and loading it again for undo feature. Do we have any better solution for this features in Fabric.js? 回答1: This is better explained in this link. Use it this way: canvas.on('object:moving', function(e) { // or 'object:added' var activeObject = e.target; console.log

问题 I have got a lot of helps from this site and contributors here, thanks. Now I have a question about the Rectangle in Fabric.js with stroke, as I used it as kind of placeholder for images and text, when I scaled it, the border line width is scaled too, I think it's kind a problem as I want to keep the border width not changed. var canvas = new fabric.Canvas("c1"); var el = new fabric.Rect({ originX: "left", originY: "top", left: 5, top: 5, stroke: "#ccc", strokWidth: 1, fill: 'transparent',