fabricjs

Fabric.js define bounds/limits for images

由 半世苍凉 提交于 2019-12-18 12:44:51
问题 I've set up a fabric.js based t-shirt simulator. Everything works as expected except for one detail that the client would like to get solved, being that disallowing an uploaded image to get past the t-shirt canvas (we could see it as the background image). I've this background image in png and svg as well but how could I accomplish? EDIT: Based on the image, I'd like the image in the center of the tshirt to not be able to get dragged outside the red line... this would be the ideal scenario.

How to use / include fabricjs in Angular2

由 时间秒杀一切 提交于 2019-12-18 10:46:37
问题 I want use fabricjs in my project. I installed fabricjs using bower and linked in index.html. but it is not working. Please see the below code. index.html <html> <head> <script>document.write('<base href="' + document.location + '" />'); </script> <title>Image Editor</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older

Fabric.js eraser issue canvas

由 烂漫一生 提交于 2019-12-18 05:45:10
问题 I want to implement eraser in my web app using Fabric.js. Is there any way to implement eraser in Fabric.js? For example, such as in MS Paint? 回答1: There's no built-in eraser in Fabric and implementing is a bit difficult. The thing about Fabric is that everything is object-based and most of the things are also vector-based. Unlike with native canvas, we can't just erase some pixels on a global bitmap. We have entire object model underneath, and canvas output is a simple loop of all those

How to deal with fabric JS image mask?

由 爷，独闯天下 提交于 2019-12-18 05:26:19
问题 I am trying to implement image mask as example below : Example image here: https://s3-ap-northeast-1.amazonaws.com/utonly/demo/demo.jpg I have tried so many ways and took a lot of time, but still can't find a good solution for it. The image must be able to resizing and rotating inside the mask, or edit from another view, and then apply the result back to the image. I found similar example here http://jsfiddle.net/tbqrn/68/ , but I don't want images pass through each other. Is that possible?

Move object within canvas boundary limit

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-17 22:32:51
问题 I am trying to limit the moving object within the canvas but i am getting some difficulty to moving object with limit area on top and left side and when i scale the object with big size that time also i am not able to limit the moving object on left and top side of the canvas canvas.observe("object:moving", function(e){ var obj = e.target; // if object is too big ignore if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ return; } var halfw = obj.currentWidth/2;

Undo-Redo feature in Fabric.js

由 纵然是瞬间 提交于 2019-12-17 21:54:32
问题 Is there any built-in support for for undo/redo in Fabric.js? Can you please guide me on how you used this cancel and repeat in [http://printio.ru/][1] 回答1: In http://jsfiddle.net/SpgGV/9/, move the object and change its size. If the object state is changed, and then we do undo/redo, its previous state will be deleted when the next change comes. It makes it easier to do undo/redo. All events of canvas should be called before any element is added to canvas. I didn't add an object:remove event

Crop Functionality using FabricJs

由 坚强是说给别人听的谎言 提交于 2019-12-17 18:26:35
问题 How to implement crop tool on the image that is loaded on the canvas using fabric.js ? I have a image loaded on the canvas .Now i want to implement crop tool where the user is allowed to crop the image and reload it on to the canvas when he is done. 回答1: In Summary set el.selectable = false draw a rectangle on it with mouse event get rectangle left/top and width/height then use the following function Sorry, let me explain. The ctx.rect will crop the image from the center point of the object.

Multiple clipping areas on Fabric.js canvas

由 帅比萌擦擦* 提交于 2019-12-17 05:43:30
问题 For making Photo Collage Maker, I use fabric js which has an object-based clipping feature. This feature is great but the image inside that clipping region cannot be scaled, moved or rotated. I want a fixed position clipping region and the image can be positioned inside the fixed clipping area as the user want. I googled and find very near solution. var canvas = new fabric.Canvas('c'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(10,10,150,150); ctx.rect(180,10,200,200); ctx

Download Canvas as PNG in fabric.js giving network Error

由 非 Y 不嫁゛ 提交于 2019-12-17 04:00:28
问题 I want to download Canvas as PNG using fabric.js. While downloading I want to scale the image. So I use multiplier property of toDataURL() function. But I get Failed-Network Error PS: If I dont give multiplier property,it is downloading but I do want to use multiplier property since I have to scale the image This is what I am doing: HTML Code: <canvas width="400" height="500" id="canvas" ></canvas> <a id='downloadPreview' href="javascript:void(0)"> Download Image </a> JS document

transforming mouse coordinates in CANVAS using fabric.js

由 蓝咒 提交于 2019-12-14 04:08:34
问题 I have designed a ruler using fabric.js and when the user mouses over the specific part of the ruler I want to print to the screen the X-coordinate of the ruler (i.e. not the screen coordinate). Right now the ruler canvas starts at position 37 and ends at 726 relative to the ruler, but the ruler goes from 1 to 4600 (it will always start at 1 but the length of the ruler can change). How to transform the mouse coordinates to accurately reflect it's position on the ruler? Here is the code: var
订阅 fabricjs