fabricjs

How to draw a line on a canvas using fabric.js

由 南楼画角 提交于 2019-12-09 14:31:07
问题 I am using fabric.js to draw a line on a canvas. This is my code, but I'm not getting any output: $("#Line").click(function() { // alert("Line"); canvas.add(new fabric.Line([50, 100, 200, 200], { left: 170, top: 150, fill: 'red' })); }); 回答1: Simple change: You can't fill a line with a color in fabric.js. You have to use stroke with a color instead. In the snippet below fill:'red' is replaced with stroke:'red' . $("#Line").click(function () { // alert("Line"); canvas.add(new fabric.Line([50,

Creating and selecting a group programmatically with Fabric.js

由 放肆的年华 提交于 2019-12-09 13:30:22
问题 Let's say I have a canvas containing 6 objects and a button outside of canvas. When I click this button, 3 of this objects will to become a group and selected, objects will keep their positions relative to canvas. Is that possible? I tried so many things but could manage it to work. The solution that I'm looking for is something like below. var objectList=[1,2,3]; var newgroup = new fabric.Group(); $.each(objectList, function (i) { var obj = canvas.item(i); newgroup.add(obj.clone()); canvas

Fabric.js : How to set a custom size to Text or IText?

由 不想你离开。 提交于 2019-12-09 13:19:14
问题 I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text. var t = new fabric.IText("Hello world !", { top: 100, left: 100, width: 200, height:200, backgroundColor: '#FFFFFF', fill: '#000000', fontSize: 12, lockScalingX: true, lockScalingY: true, hasRotatingPoint: false, transparentCorners: false, cornerSize: 7 }

How to identify the type of a selected object?

由 一曲冷凌霜 提交于 2019-12-09 07:59:15
问题 I am placing Text, Image and Shapes on canvas using Fabric.js. I have made Three different Edit-Panels for all three. When user select text I want to show text panel. like wise for image and shapes. How to identify type of selected Object? 回答1: canvas.getActiveObject().get('type') as simmi simmi said is correct. You can also listen to events: function onObjectSelected(e) { console.log(e.target.get('type')); } canvas.on('object:selected', onObjectSelected); 回答2: I solved this issue using

Free drawing on canvas using fabric.js

由 点点圈 提交于 2019-12-09 06:49:32
问题 I am trying to draw a free drawing on canvas using fabric.js but i am not able to free draw a like spray, circle, texture mode on my side i use this code only the pencil mode drawing is working but when i select spray and other mode that mode drawing as pencil. Here is my HTML Here is fiddle ink <label for="drawing-mode-selector">Mode:</label> <select id="drawing-mode-selector"> <option>Pencil</option> <option>Circle</option> <option>Spray</option> <option>Pattern</option> <option>hline<

Perspective Transformation of object filled with image in fabricjs

由 与世无争的帅哥 提交于 2019-12-09 06:36:50
问题 We have some objects filled with image source. Is it possible to achieve perspective transformation of the filled image with adjusting rectangular grid positions in fabric js? i am trying to achieve similar to the above image in fabric js.... 回答1: True perspective distortions are not possible with FabricJS or other 2d canvas libraries. Canvas's 2d context will not do perspective transforms. Most canvas libraries, including fabricJS, use 2d contexts. There is a canvas 3d context -- webGL that

Adding grid over Fabric.js canvas

由 血红的双手。 提交于 2019-12-09 04:39:08
问题 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

Can't resize canvas/scale using Fabric.js

由 ぐ巨炮叔叔 提交于 2019-12-09 03:03:28
I need to display a large canvas as a smaller one for the purposes of good user interaction, but uploading a large canvas later. I am using Fabric.js and am trying the Canvas css trick where you set the width/height for the canvas in HTML and then set it via CSS to smaller one as documented here: fabric.js resize canvas to fit screen When I attempt to resize as follows, it makes the canvas 300x150 (default canvas) and doesn't respect my CSS. HTML: <canvas id="c"></canvas> JavaScript: var canvas = new fabric.Canvas('c', { }); canvas.width = 1000; canvas.height = 1000; CSS: #c { width: 650px;

Fabricjs build 1.7.15 with gesture support

由 丶灬走出姿态 提交于 2019-12-09 01:55:31
问题 I've been working on a project with fabricjs. Great library, but I ran into a stupid problem which I can't seem to solve. I've been working with version 1.7.15 and prefer to stick to the stable version for now instead of upgrading to version 2.0.beta. I've used a fabricjs version without gestures support so far, but now I would like to include the gesture support. Where can I build a version of fabricjs ^1.7 with gesture support now? Since the custom build on the site of fabricjs only seem to

FabricJS Catch click on object inside group

由 时光总嘲笑我的痴心妄想 提交于 2019-12-08 21:16:08
问题 I have tried many thing like calculating location, handling with the event we do have in original fabricjs. Does any have done this before? 回答1: It is possible to listen for events on the inner object by adding the option: subTargetCheck: true to the fabric.Group object. // create a group let group = new fabric.Group([circle, rect], { subTargetCheck: true }); circle.on('mousedown', function(e) { // e.target should be the circle console.log(e.target); }); 回答2: I downloaded fabricjs from
订阅 fabricjs