fabricjs

Fabricjs canvas reset after zooming

由 自作多情 提交于 2019-12-04 02:39:08
I have a fabricjs canvas that I need to be able to zoom in and out and also change the image/object inside several times. For this I setup the canvas in the first time the page loads like this: fabric.Object.prototype.hasBorders = false; fabric.Object.prototype.hasControls = false; canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false}); canvas.defaultCursor = "pointer"; canvas.backgroundImageStretch = false; canvas.selection = false; canvas.clear(); var image = document.getElementById('my_image'); if (image != null) { imageSrc = image.src; if(imageSrc.length > 0){

Fabric JS - send Objects to Back

由 我只是一个虾纸丫 提交于 2019-12-04 01:15:07
问题 When you select an object (in my example a polygon), it gets automatically moved to the Front. I'm searching for a way to prevent the movement on the z-axis or send it backwards after the selection, maybe someone can help? Here is a link to a simple example: http://jsfiddle.net/98cuf9b7/1/ When you select one of the Polygons, it gets moved to the Front. I tried to send it backwards after the selection, but even if the "canvas.sendToBack(object)" function is called, it's still remains in the

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

由 狂风中的少年 提交于 2019-12-04 00:09:37
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' })); }); Sanjay Nakate 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, 100, 200, 200], { left: 170, top: 150, stroke: 'red' })); }); 来源： https://stackoverflow.com

fabricjs placement of images on canvas inconsistent

由 前提是你 提交于 2019-12-03 22:47:14
I have a series of 4 images which I'm attempting to place at specified coordinates in fabricjs, and I'm getting them placed inconsistently sometimes when the page loads. Refreshing once or twice will usually give the correct layout. Trying to prevent this from happening. Anybody know how to solve this? Here's my code: var objects = [ { type: "image", filename : "tv.png" , x: 688, y: 184, angle: 0, zIndex: 10 }, { type: "image", filename : "polaroid.jpg" , x: 347, y: 515 }, { type: "image", filename : "polaroid.jpg" , x: 138, y: 643 }, { type: "image", filename : "polaroid.jpg" , x: 429, y: 803

FabricJS objects not relative to canvas resize

由 百般思念 提交于 2019-12-03 21:56:35
I'm using FabricJS to create a fullscreen canvas and save the changes serverside. Before loading it I resize the canvas & background so that on every page-load the canvas fits inside the users window. canvas.setHeight($(window).height()); canvas.setWidth($(window).width()); canvas.backgroundImage.width = $(window).width(); canvas.backgroundImage.height = $(window).height(); The problem is that the canvas & background get adjusted but not the objects. They keep the same position relative to the screen and don't change size so are incorrent on other screensizes. How can this problem be solved?

Is there anyway to make canvas object auto snap align on Fabric.js [closed]

由 好久不见. 提交于 2019-12-03 21:16:23
Im working on a project of building a editor, i am using the Fabric.js, but i don know how to make the canvas object auto align. Is there any example of making canvas object auto align with another object like this? image of snap example auto snap example from other site link here: auto snap example site I was working on the same thing. This seems to be a pretty common feature request so I thought I'd share what I worked out. It could use some refinement. For instance, I've noticed if you scale the red box, the scale is not applied and it doesn't align right. However, I think it demonstrates

Fabric.js + Google Fonts

由 为君一笑 提交于 2019-12-03 21:15:51
Is that possible to use Fabric.js with web fonts, without attaching Cufon library and its fonts? I can easily do it with standard canvas functionality so I wonder if it's possible in Fabric. We're planning to ditch Cufon soon, in favor of native text methods. We incorporated Cufon ~2 years back when native text methods weren't very cross-browser available (see this test of mine from back in the days). Once we drop it, it will probably be an optional module, for cases when compatibility in older clients is important. First link the google font in the <head> <link href='http://fonts.googleapis

Undo Redo for Fabric.js

由 故事扮演 提交于 2019-12-03 18:42:06
问题 I'm trying to add undo/redo functionality to my Fabric.js canvas. My idea is to have a counter which counts canvas modifications (right now it counts the addition of objects). I have a state array, which pushes the whole canvas as JSON to my array. Then I simply want to recall the states with canvas.loadFromJSON(state[state.length - 1 + ctr], As the user clicks on undo, ctr will reduce by one and load the state out of the array; as the user clicks on redo, ctr will increase by one and load

Set object drag limit in Fabric.js

由 点点圈 提交于 2019-12-03 18:30:31
问题 i am new in fabric js want to set the drag limit i have also try with https://github.com/kangax/fabric.js/wiki/Working-with-events not able to get the solution. please check the attached image, object can move anyware but it should be display in red area only.i want this. help me...thanks in advance !! 回答1: What had worked for me is to create an event listener for the object:moving event. When the move is happening you update the goodtop and goodleft variables and once you are out of bounds

Right way to rotate things with a mouse in Fabric.js

由 前提是你 提交于 2019-12-03 17:20:29
问题 This is the example: http://jsbin.com/UHENoKi/11/ Here I use simple formula to find the angle between two points (vectors): But as you could see at JSBin - something is broken. Where did I make a mistake? UPDATE Working example: http://jsbin.com/UHENoKi/13/edit?js,output 回答1: The angle to rotate by is being calculated based on the 0,0 origin, but the square is rotating around its own center at 100, 100, so they don't match. If you move the square to 0,0, it feels OK: var rect = new fabric
订阅 fabricjs