fabricjs

Adding grid over Fabric.js canvas

由 旧城冷巷雨未停 提交于 2019-12-03 06:08:43
I just started using Fabric.js (I have to say, I'm impressed). I want to add a grid over the fabric objects. In the following code, I am putting my grid canvas right over on the Fabric canvas. The problem here is that, I now cannot move my fabric objects! <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script> </head> <body> <div style="height:480px

Cloning objects in Fabric.js

由 这一生的挚爱 提交于 2019-12-03 06:03:36
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.getActiveObject(); canvas.fxRemove(obj); } The objects are the same. Is there are way to clone objects and make

Saving canvas as a PNG or JPG

由 浪尽此生 提交于 2019-12-03 05:46:15
问题 I want to save canvas as PNG, without opening it in a new window as base64-encoded image. I used this code: jQuery("#btnPreview").click(function(){ if (!fabric.Canvas.supports('toDataURL')) { alert('Sorry, your browser is not supported.'); } else { canvas.deactivateAll(); canvas.forEachObject(function(o){ if(o.get("title") == "||Watermark||"){ canvas.bringToFront(o); } }); window.open(canvas.toDataURL('png'), ""); canvas.forEachObject(function(o){ if(o.get("title") == "||Watermark||"){ canvas

Let user delete a selected fabric js object

由 让人想犯罪 __ 提交于 2019-12-03 04:29:51
I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20, }); canvas.add(rect); } window.addCircle = function(){ var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 }); canvas.add(circle); } This is my Fiddle . You can click on new animation and then add objects as of now. I want the user to select

Fabric.js canvas.toDataURL() sent to PHP by Ajax

由 拈花ヽ惹草 提交于 2019-12-03 03:42:26
I have a problem here when I need create a image with transparent background. I still don´t know if the problem is with fabricjs or with php. Everything works fine when I sent a image with colored background. The problem occurs when I send a image with transparent background. The generated image is created with black background. So, let me explain better: When the user click in save button, I´m sending the string representation of the canvas to php in the server-side, to be generated the image of the canvas. So I´m using the follow function to sending the string representation of the canvas by

Grouping and Ungrouping Fabric.js objects

由 半腔热情 提交于 2019-12-03 03:36:05
I've created a kind of 'polygon selector' or 'polygon maker' using fabric.js. Each click creates a corner of the polygon, which can be selected, moved, etc... double clicking the original point 'closes' the polygon. At this point I take all of the circles/lines that make up the polygons and group them. So far so good. When such a group is double clicked, I would like it to ungroup and revert to movable nodes (i.e. moving the circles reshapes the polygon etc); but there's some strangeness going on - check out what happens when you move the circles, certain lines seem 'not joined' to the circles

Fabricjs HTML5 Canvas: Why are images so poorly resized?

由 ⅰ亾dé卋堺 提交于 2019-12-03 03:07:08
When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality. But if I add that same image as an <img/> and scale it down, it retains its quality. Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does? user3425836 It should probably go for a comment, but unfortunately I am new here and I can't add comments. However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers

FabricJS: Always Center Object on Canvas

由 感情迁移 提交于 2019-12-03 03:01:12
is it possible to ALWAYS center an object on a fabricjs canvas? Background: I am building a webtool that makes it easy to create complex animations using fabricjs. I want to be able to set the canvas size to 100% for both width and height. Thus I want to place all my objects at the center and add an X/Y offset to it. When I resize the canvas later on I can readjust the objects from center using the x/y offset. Is there such a build in function? Or should I simply add a property to the object and if the canvas is being resized - check all objects for that property and readjust the object's

Interactive text fields with Fabric.js

由 家住魔仙堡 提交于 2019-12-03 02:23:45
问题 I've been playing with Fabric.js a lot in the last few weeks, but regarding text fields I've only found it possible to set the text on creation. Is there any possible way to make an interactive text field, or do I have to find a workaround to achieve that? (With interactive text field I mean an area of the canvas I can click on and write directly into it.) 回答1: The latest version of fabric.js includes a class IText which incorporates the interaction for editing and selection of text

Fabric.js changes my canvas size to 300x150 after initialization

由 帅比萌擦擦* 提交于 2019-12-03 00:57:42
HTML: <div class="canvas-wrapper"> <canvas id="myCanvas"></canvas> </div> CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; height: 100%; width: 99%; } JS var myCanvas = new fabric.Canvas('myCanvas'); My canvas get resized to 300x150 after it's been initialized, why? in the latest version, you will have to do something like: var canvas = new fabric.Canvas('myCanvas'); canvas.setHeight(500); canvas.setWidth(800); .... Your code .... canvas.renderAll(); Works fine for me.. When initializing canvas, Fabric reads width
订阅 fabricjs