fabricjs

问题 I'm trying to read the X coordinate of a mouse click on Fabric.js. Here is my code. The console logs undefined every time. var canvas = new fabric.Canvas('c1'); canvas.on('mouse:down', function(e){ getMouse(e); }); function getMouse(e) { console.log(e.clientX); } 回答1: The best fix is this method Implementation: function getMouseCoords(event) { var pointer = canvas.getPointer(event.e); var posX = pointer.x; var posY = pointer.y; console.log(posX+", "+posY); // Log to console } 回答2: To get

问题 I'm trying to read the X coordinate of a mouse click on Fabric.js. Here is my code. The console logs undefined every time. var canvas = new fabric.Canvas('c1'); canvas.on('mouse:down', function(e){ getMouse(e); }); function getMouse(e) { console.log(e.clientX); } 回答1: The best fix is this method Implementation: function getMouseCoords(event) { var pointer = canvas.getPointer(event.e); var posX = pointer.x; var posY = pointer.y; console.log(posX+", "+posY); // Log to console } 回答2: To get

问题 I am cloning a selected object on a canvas in Fabric.js using a simple function. function duplicateObj() { var obj = canvas.getActiveObject(); var clone = fabric.util.object.clone(obj); clone.set({left: 100,top: 100}); canvas.add(clone); } That works absolutely fine. Now if I work with the object and the clone is not required anymore and I select and delete it, both objects, the clone and the original object are deleted. The delete function is: function deleteObj() { var obj = canvas

问题 I want draw a fabric.Polygon with mouse interaction in Fabric.js. I made a small jsfiddle to show my actual state: http://jsfiddle.net/Kienz/ujefxh7w/ After pressing the ESC key, the "interactive draw mode" is canceled and the polygon is finalized. But now the position of the polygon is wrong (controls are right). Has anyone an idea? 回答1: Problem definition When the polygon is added as static object (in sense that the points won't be modified) it's left, right, minX, minY, width, height and

问题 I'm using FabricJS to create a canvas for drawing specific lines and shapes. One of the lines is a wavy line with an arrow similar to this: I've successfully created a straight version of this with an arrow endpoint but can't find any examples of how to create a wavy line. The user can draw the line as long as they want so the number of 'peaks' and 'troughs' in the line will need to adapt accordingly (a short line like the image above might have 4 peaks but a line twice the length would have

问题 I'm working on a canvas drawing project. I convert the canvas as an image, then I save that image as '.png'. I have to right click on the image and select the 'save image as' option. But I want to provide that option through a button. When I click the button it should be saved. Any example or idea would be appreciated. This is a js function that converts canvas to png. function save2() { window.open(canvas.toDataURL('image/png')); var gh=(canvas.toDataURL('png')); alert("converted"); } 回答1:

问题 I am writing a script with Fabric.js to zoom an image at the current mouse position. I have made some progress but there is an error somewhere. Case 1 : Keep the mouse at one point and zoom with the mouse wheel. Result: Works perfectly, image zooms at that particular pixel. Case 2: Zoom in a little at one position (3-5 times with mouse wheel), then move the mouse to a new position and zoom in there. Result: Works fine for the first point, but after moving to another point and zooming, the

问题 Using Fabric.js 1.1.6, I have the following: var rect = new fabric.Rect({}); rect.on('moving', function(obj) { // I want to retrieve and set properties from the // object rect from inside this event function }); Is it possible to retrieve and modify the rect properties from inside the function called by the event? If it is, how do I do that? If it is not, any suggestions on how could I modify rect properties from inside the event function? Thank you in advance! -- Update: The above question

问题 I have override fabricjs Text object to make letter spacing fabric.util.object.extend(fabric.Text.prototype, { letterSpace: 0, _renderChars: function(method, ctx, chars, left, top) { if(!this.letterSpace){ ctx[method](chars, left, top); return; } var charShift = 0; for(var i = 0; i < chars.length; i++){ if(i > 0){ charShift += this.letterSpace + ctx.measureText(chars.charAt(i-1)).width; } ctx[method](chars.charAt(i), left+charShift, top); } }, _getLineWidth: function(ctx, lineIndex) { if

问题 I'm using fabric.js in my site. suppose if I need to add any text in canvas, I write - like- var text1 = new fabric.Text('Fabric', { left: 90, top: 570, angle: -5, fontFamily: 'Helvetica', fontSize: 20, fill: 'red' }) but I need all available fonts (like - times new roman, Helvetica) in a list so that I can select the font at run time, I tried to google it but I got nothing. I wonder if anybody help me. Thank in advance. 回答1: fabricjs doens't provide any fonts for you. Instead, it uses a