fabricjs

Delete multiple Objects at once on a fabric.js canvas in html5

由 可紊 提交于 2019-11-27 12:57:46
问题 I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all objects on the canvas. var deleteSelectedObject = document.getElementById('delete-item'); deleteSelectedObject.onclick = function(){ var curSelectedObjects = new Array(); curSelectedObjects = canvas.getObjects(canvas.getActiveGroup); canvas

fabric.js resize canvas to fit screen

由 烂漫一生 提交于 2019-11-27 12:31:13
问题 I'm currently developping an application on mobile device (android and iPhone) with ionic and cordova. I would like to edit a picture. I use fabric.js library to do that. Fabric.js converts an image and other items into canvas. Then I add some image on the canvas (stickers) and export it as an image(dataURL). So the size of the canvas is really important because it is a quality factor (export an image based on small canvas will result in poor quality). The canvas size is about 607*1080 pixel

How to select Fabric.js object programmatically

由 人走茶凉 提交于 2019-11-27 11:10:41
问题 I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this: var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height: 50, fill: 'green', stroke: 'black', strokeWidth: 3, padding: 10 })); canvas.add(new fabric.Circle({ left: 200, top: 200, radius: 30, fill: 'gray', stroke: 'black', strokeWidth: 3 })); and I have two button while clicking the button named select rectangle select

Drag and Drop into Fabric.js canvas

由 大憨熊 提交于 2019-11-27 10:11:23
问题 How can I drop items (like image, or other object from other canvas) into canvas which is managed by fabricjs? I have found many examples how to move items inside canvas but I would like to drag and drop item from outer element into canvas. 回答1: Since you asked for an example and I haven't tried it out myself yet, here goes: Example Fiddle Markup <div id="images"> <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img> <img draggable="true" src="http://i

How to get the canvas-relative position of an object that is in a group?

由 感情迁移 提交于 2019-11-27 09:04:20
Normally an object's position relative to the canvas can be gotten from it's .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas? When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well). Lets say we have this code which has a rect and a circle added to a group. var canvas = new fabric.Canvas(document.getElementById('c')); var rect = new fabric.Rect({ width: 100, height: 100, left: 50, top: 50,

How does transforming points with a transformMatrix work in fabricJS?

由 ￡可爱￡侵袭症＋ 提交于 2019-11-27 08:59:51
I'm trying to place points (made via fabric.Circle ) on the corners of a fabric.Polygon . The polygon may be moved, scaled or rotated by the user. However, after each modification I want to have the new coordinates of the polygon to place my circles there. While digging deeper into this topic I found this great explanation of transformation matrices. I thought it's the perfect solution for what I want to achieve. But as you can see in the Fiddle, my points are always way off my polygon. As I'm not firm with geometric transformation etc. I hope someone can find my error and tell me what I'm

Snap edges of objects to each other and prevent overlap

由 ℡╲_俬逩灬. 提交于 2019-11-27 08:08:05
My goal is to prevent overlapping of two or more rectangles inside my FabricJS canvas. Imagine two rectangles having info on position and size and you can drag and drop any rectangle inside the canvas. If rectangle A gets close enough to rectangle B, the position of rectangle A should snap to the edge of rectangle B. This should work for any edge of rectangle B. The vertices do not have to match, cause the sizes of the rectangles are variable. I have a working example for this snapping on one dimension (x-axes). My best jsfiddle attempt See jsfiddle . But I need it to work around the rectangle

How do i get the coordinates of vertices of shapes instead of the control corners coordinates in fabric js?

由 穿精又带淫゛_ 提交于 2019-11-27 07:31:45
问题 The following code gives me coordinates of control corners but I want to calculate the coordinates of vertices of triangle, pentagon, hexagon etc., <!-- fabric js function to return coordinates--> function getCoords(oCoords) { return { tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y), tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y), bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y), br: new fabric.Point(oCoords.br.x, oCoords.br.y) } } <!--fabric js event handler--> canvas.on('mouse:move',

Wrap images on papercup(background image)

由 我与影子孤独终老i 提交于 2019-11-27 06:24:14
问题 I want to wrap images and text on sample papercup. When a image is uploaded on canvas, I want to wrap it around the background image of papercup whose position is fixed at all times. I am using Fabric JS for the html5 canvas tool. Here is my code but there it only shows 1pixel of image, also when I click the image to drag and drop ,it VANISHES. HTML: <div id="container"> <input type="file" id="imageLoader" name="imageLoader" /> Remove:<input type="button" value="remove" id="imageRemove" name=

canvas.toDataURL() for large canvas

由 寵の児 提交于 2019-11-27 04:18:18
I have a problem with .toDataURL() for large canvas. I want to enconde in base64 and decode on php file but if I have a large canvas the strDataURI variable is empty. My code: var strDataURI = canvas.toDataURL(); strDataURI = strDataURI.substr(22, strDataURI.length); $.post("save.php", { str: strDataURI }; Is there any alternative to .toDataURL() or some way to change the size limit? Thanks. sn3p I'm not sure if there are limitation to canvas dimensions, but data urls have limitations depending on the browser: Data URL size limitations . What you could try is using Node.js + node-canvas
订阅 fabricjs