fabricjs

问题 In my fabricjs I am making a canvas and adding an image to it and setting the image as background. and then I am clipping the cavas to some width and height. After I clip the canvas I want a new canvas or same canvas with clipped area as background all covering the canvas with its width and height or can make new canvas with clipped area's height and width Currently I am doing this.. function crop(url, name, left, top, width, height, callback) { var c = document.createElement('canvas') var id

问题 Is there a way to receive right click mouse events on a Fabric.js canvas? The following code works only with left click: canvas.observe('mouse:down', function(){console.log('mouse down')); 回答1: I've implemented right click by extending the fabric.Canvas class. Take a look here the _onMouseDown method. Basically the right mouse down event for an object was disabled in fabricjs by default. 回答2: The way I did this was to listen for a right click event across the entire canvas and match up the x

问题 I would like to resize a fabricjs rect instead of scale it, but I'm seeing weird behaviour while dragging the resize handles. The border starts to disappear or duplicate. I've tried both the stable version 1.7.19 and the beta 2.0.0 of fabricjs. Here is the essence of the code I'm using: canvas.on('object:scaling', function(){ var obj = canvas.getActiveObject(), width = obj.width, height = obj.height, scaleX = obj.scaleX, scaleY = obj.scaleY; obj.set({ width : width * scaleX, height : height *

问题 Are there any Fabric.JS Wizards out there? I've done my fair research and I can't seem to find much of an explanation on how to add an image to the fabric.JS canvas. User Journey: a) User uploads an image from an input file type button. b) As soon as they have selected an image from their computer I want to place it into the users canvas. So far I've got to storing the image into an expression, this is my code below: scope.setFile = function(element) { scope.currentFile = element.files[0];

问题 I've read 3-5 topics about mouse offset, but i still can't get where is the mess. In my case everything works fine in 60%. In other 40% mouse is offset. Demo here. Sometimes object position doesn't relate to mouse behavior. (IE & Chrome have the bigest mess) I've tried to edit stylesheets and parent div but nothing. The worst thing: i don't see any regularity. I will be greatful for any help. 回答1: You can do this: canvas.on("after:render", function(){ canvas.calcOffset() }); I only do this

问题 In my fabric application, I'm currently listening for certain key presses such as the delete key, and deleting any selected elements. My method of listening for key presses is: document.onkeydown = function(e) { if (46 === e.keyCode) { // 46 is Delete key // do stuff to delete selected elements } I'm running into a problem though: I have other elements like text boxes on the page, and when typing in a text box, I don't want the delete key to delete any elements. In this question, there's a

问题 How can i fire custom events on canvas in fabric js? I want to register javaScript events on canvas in fabric js. 回答1: If you want to extend fabricjs event system with your custom events, that is pretty simple: var canvas = new fabric.Canvas('c'); // listen for any event like fabricjs do canvas.on('custom:event', function(event) { // you will have your data here in `event` object }); // fire any event with any payload you want canvas.fire('custom:event', { any: 'payload' }); I prefer this way

问题 I am trying to import multiple svg file and after modification saving the json to database. I have tried to use canvas.item(0).sourcePath = '/URL/FILE.svg'; JSON.stringify(canvas.toDatalessJSON()); but this won't work for multiple files, it works for the first file only. i am trying to specify every single file url but can't understand how this can be done. any solution please? thanks in advance 回答1: canvas.item(0) - gets the first object. canvas.item(1) - gets the second object and so on....

问题 I have a canvas where the user can create a design using images in another div that they click, sending it to the Fabric.js canvas where it gets moved around and so on. Since the canvas's size is width="270" and height="519" , smaller than what the finished product is, I need to recreate it with a canvas that has the size width="1001" and height="1920" and then screenshot it so that I get it all in 1 single image. How do I do this? This is what my code looks like so far: HTML <div id=

问题 I'm trying to create a block game where you select shapes from a menu and place them on the canvas. There is a shape menu where you can drag the shapes onto the canvas. I would like for it to leave the main shape in the menu as it drags a clone onto the canvas. Is this possible? I have created a jsfiddle to help. JSFIDDLE window.canvas = new fabric.Canvas('fabriccanvas'); var edgedetection = 10; //pixels to snap canvas.selection = false; window.addEventListener('resize', resizeCanvas, false);