fabricjs

问题 i try to draw a polygon with the mouse , and i have found that example on jsfiddle: http://jsfiddle.net/Kienz/ujefxh7w/. the problem is that when we finish the draw and try to selet the object, the borders are outside of the shape. can we fixe that or is it a fabric.js bug? as we can also see on the official fabricjs.com/ page, on the front page examples, the free hand drawings are also out of the border frame. // initialize fabric canvas and assign to global windows object for debug var

问题 I am using Fabric.js and Canvas to design some cards. I need to strech the background image to the canvas size. But it is not working. Below is my code. SCRIPT <script src="/fabric/dist/fabric.js"></script> ... <script> function myBg(){ var canvas = this.__canvas = new fabric.Canvas('myCanvas'); canvas.setBackgroundImage('images/download.jpg', canvas.renderAll.bind(canvas), { backgroundImageOpacity: 0.5, backgroundImageStretch: true }); //this.__canvases.push(canvas); this gives me 'Uncaught

问题 I'm working on a project in which several shapes (rectangle, triangle, ellipse, ..) can be drawn on a fabricJS canvas. Now I'm implementing the functionality to draw an arrow. This arrow consists out of two shapes, a line and a triangle (arrow head). They are added to the canvas as a group object but the problem is that the arrow is not drawn correctly on the canvas. (see this picture ). Below is my code to draw the arrow: drawShape: function(canvas, shape) { let selectedShape; let pointer,

问题 With fabric.js how would I go about hiding/displaying controls such as text controls only when text is selected? Right now I have a button that lets someone plug in text, and text editing options, however I don't always want this displayed. Ideally it'd be a pop-over when selected. Right now, my code is: // Add image from local var canvas = new fabric.Canvas('c'); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader

问题 I'm using fabric.js and loading a number of SVG files into it. I have no problem displaying one of these imported files using this code; fabric.loadSVGFromURL('ico-svg/drink.svg', function(objects, options) { var drink = fabric.util.groupSVGElements(objects, options); drink.set({left: 80, top: 175, width: 32, height: 32 }); canvas.add(drink); canvas.calcOffset(); canvas.renderAll(); }); However, when I repeat this code, the page only shows one of the two SVGs, and they actually change upon

问题 Why this clipTo method doesn't work on the latest fabricjs version, which you could resize the object container and the image inside it. Also you able to move the container object and image object. var imgInstance = new fabric.Image(img, { width: instanceWidth, height: instanceHeight, top: (canvas.getHeight() / 2 - instanceHeight / 2), left: (canvas.getWidth() / 2 - instanceWidth / 2), originX: 'left', originY: 'top' }); canvas.add(imgInstance); imgInstance.clipTo = function(ctx) { /* image

问题 I'm working on a project with Fabric.js. Now I need to create a custom class and to export it to SVG. I'm using Fabric.js tutorial to begin: http://www.sitepoint.com/fabric-js-advanced/ Here is the javascript code: var LabeledRect = fabric.util.createClass(fabric.Rect, { type: 'labeledRect', initialize: function(options) { options || (options = { }); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: function() { return fabric.util.object.extend(this

问题 I'm using fabric.js in one project, where user can draw on canvas, and save to png image (using canvas.toDataURL() function). However, we noticed if user moved an object and clicked on Save button, it saves a border and corners of previously moved object (borders are always displayed when you move or resize object). So we need a way to remove object borders before saving, is that possible? 回答1: Yes. You probably want to deactivate all objects before saving an image: canvas.deactivateAll()

问题 Is there a way to antialiase image that added to canvas using fabric.js I'm having trouble to do this with scaleToHeight function. I couldn't find any suitable option in fabric library. var canvas = new fabric.Canvas('canvas'); var url = 'https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png'; fabric.Image.fromURL(url, function (oImg) { oImg.scaleToHeight(canvas.getHeight()); canvas.add(oImg); canvas.renderAll(); }); <script src="http://cdnjs.cloudflare

问题 I'm working on a big custom application with Fabric JS and I already did a great job. But I have a problem with init loaded text object that uses a webfont. As long as that font is local on the client's computer, I works fine, ELSE the webfont is NOT loaded and the text object on the canvas is rendered in a default sans-serif font-family. Here is, in short, what I do (in this example I use "allstar" as my webfont) : CSS: The css is loaded inside fonts.css in the head before fabric.js @font