fabricjs.com | http : //fabricjs.com - http : //fabricjs

In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)

(Yes I've already seen this post and it doesn't solve or reference my problem)

What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to the path that's being drawn and show the fill as it's being drawn.

My question is, "How can I showing the fill as the user is drawing using free drawing in fabric.js?"

I'm using fabricJS with Angular when I want to align an element to left for example I'm using the following method

I am building a Warehouse map in 2D with fabricjs where I am displaying their racking systems as a series of rectangles.

As a first "layer/group", i add all bays as groups containing a rectangle and text, both positioned at the same (x,y). They also have both an angle set to fit their orientation in the space.

As a second "layer/group", i add groups containing a circle and text, representing the bay's number of issues. The (x,y) also fits the bays. This way, all my issues are always on top of the bays and the center of the group fits the rotated corner of the bay.

On the first paint, all is well aligned. Once they're shown on the page, the user can create new issues, so I am trying to position the issue group fitting the original (x,y), but since it can all be panned and zoomed, I am having a hard time positioning it where it should be.

I've been looking at their explanations about transforms, but I can't figure who the boss should be and thinking that having nested groups may also be why I am all mixed up.

By doing:

I would like to configure fabricJS to add extra rotation controls. I know there is a control API, I am not sure how to use it. control-api

I'm using scaleToWidth and it works but I'm not seeing any difference if I set the ignore viewport flag to true or false. I've tested this with content that is larger and smaller than the canvas. Does this concern a zoomed or otherwise transformed canvas rather than the canvas boundaries?

Can someone explain, please?

I've been using FabricJS for a while now for my interactive comic builder and for the most part, it's been great. A limitation however is that - to date - I haven't been able to find any way to make objects that aren't images apply effects.

For instance, this guide shows how to render effects over an image object but let's say for example, I wanted to apply the effect to shapes like rectangles and circles drawn with Fabric or text objects. Is there a way to do this already?

I'm not too interested in presets such as sepia or vintage etc, I really only need the ability to blur, lighten/darken and saturate/unsaturate.

I have a canvas and I add a rectangle in it. Each rectangle has its own ID. How can I get the ID by double clicking on the rectangle on the canvas? It can be either Alert or consolLog.
Example: http://fabricjs.com/manage-selection

For my fabric.js project: I'm trying to setup object snapping and alignment guidelines. For snapping, this means when a user drags an object around, if any edge of the object comes close to alignment with another object edge, it will snap into place. During this time, guidelines appear as visual helpers for the user.

So far I'm implementing existing work, done by various fabric.js contributors, found here:

centering_guidelines.js & aligning_guidelines.js.

WORKS: At default zoom (1), object snapping and alignment guidelines work great!

FAILS: When zooming (in or out), the visual guidelines appear in the wrong position, however snapping maintains correct functionality.

CODE SAMPLES: Move objects around. At default zoom, snapping and guidelines work great. Change zoom level (with mousewheel) and notice guidelines are not positioned correctly, however snapping works fine.

Sample 1: Simple

Original libraries loaded as-is; simple demo.

https://codepen.io/MarsAndBack/pen/ZEQMXoM

Sample 2: Detailed

Original libraries copy-pasted inline, with modifications to help investigation.

https://codepen.io/MarsAndBack/pen/LYGJGoq

Note: Codepen has full code.

I have a custom control as stated here and I wanted to unlock the scaling for the corner buttons with canvas.uniScaleTransform = true. However, it doesn't seem to be working for this latest version. Anyone got a workaround? Thanks in advance!

Edit: "Unlock" as in have the same action as when the "shift" button is held down when resizing the with the corner controls

Edit 2: First ExampleWhen I add "canvas.uniScaleTransform = true" on line 73, I'm able to freely scale the rectangle with the corner controls without holding "shift".

Second Example However, when I attempt to add to the custom controls "canvas.uniScaleTransform" on line 2, I'm not able to replicate the free scaling behaviour. It'll only work if I hold down "shift".

Any work arounds is appreciated, thanks in advance!