fabricjs

问题 using the stickman example of http://fabricjs.com/, I have been trying to achieve moving the related circles when a line is moved. The code in the example is not well structured, heavy & with errors :), as I can not to move the the related circles symmetrically. If in the //move the other circle part is used next line obj.set({ 'left': (s.calcLinePoints().x1 + _l), 'top': ( -s.calcLinePoints().y1 + _t) }); the difference is in the sign of collected information for y1 and we move some

问题 I’d like to load my SVG file, and fill it with pattern, created from my image file. Here is my current approach: canvas = new fabric.Canvas('mainCanvas') # image = new fabric.Image(img[0]) # console.log image fabric.loadSVGFromURL '/assets/my.svg', (objects) -> fabric.util.loadImage "url/to/my/image", (image) -> console.log image svg = fabric.util.groupSVGElements(objects) svg = svg.scale(0.04).set(fill: "black", opacity: 0.5 ) svg.fill = new fabric.Pattern source: image repeat: "no-repeat"

问题 We have a problem working with paths in fabric, we need to change all the time the coordinates of a quadratic line (path) when the user drags the first point or the last point, the paths gets updated as usual, but the problem is that the bounding box of the path don't get update on every change of the object.path (see the image) (function() { var canvas = this.__canvas = new fabric.Canvas('c'); fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; canvas.on({ 'object

问题 hi im trying to upload an image and put it as canvas background. code snippet: function handleMenuImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.src = event.target.result; canvas.setWidth(img.width); canvas.setHeight(img.height); canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); //set the page background menuPages[currentPage].pageBackground.src = img.src; canvas.backgroundImageStretch = false; } reader.readAsDataURL(e

问题 I'm using a custom object extended from fabric.Image in my canvas, as suggested in this answer. When I retrieve the json string from the server, I get odd errors when attempting to load it to the canvas: var canvas = new fabric.Canvsd(); function loadCanvas(resp) { // response object contains a data field // that's essentialy a JSON string var json = JSON.parse(resp.data); canvas.loadFromDatalessJSON(json); } I get an odd printout to the console: Cannot call method 'setupState' of undefined

问题 is it possible to change the dimensions of the controls frame around a clipped object? I use "clipTo" to apply a SVG mask to an image. The problem is that the clipped image still has the dimensions and the centerpoint of the original image. I need a solution to get a clipped image that has the dimensions an the centerpoint af the SVG masked I used for clipping. Cheers, Robster 来源： https://stackoverflow.com/questions/22622618/change-dimensions-of-controls-frame-around-clipped-object

问题 I want to let users rotate objects on the Fabric.js powered canvas, but limit their rotation to 90 deg increments. Idea is that as they rotate and then stop, the object would "snap" into place at the closest angle. This works okay by listening to "object:rotating", setting the closest angle, then calling object.setAngle(angleClosestTo90). However, once the object has been "snapped", the controls for scaling/rotating the image are off. You can still select them, but it's finicky - I guess the

问题 I want to let users rotate objects on the Fabric.js powered canvas, but limit their rotation to 90 deg increments. Idea is that as they rotate and then stop, the object would "snap" into place at the closest angle. This works okay by listening to "object:rotating", setting the closest angle, then calling object.setAngle(angleClosestTo90). However, once the object has been "snapped", the controls for scaling/rotating the image are off. You can still select them, but it's finicky - I guess the

问题 My software is a kind of pixel art paint program with brushes, fabric.js was heavily modified in order to have pixel rounded translation (the position is always an integer) for the fabric.js objects, however resizing images and making their pixels fit the canvas in a 1:1 ratio is still an issue. Right now, the fabric.js zoomToPoint function is used to be able to zoom on the canvas with the mouse wheel, when images aren't scaled, their pixels fit with the canvas but when i scale any objects

问题 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