Fabric.js: Grid lines and sendForwards/sendBackwards

[wearehappybits]

Hi,

this is not more of an issue. I am seeking for advice.

this is how I add grid on top of canvas:

[ $rootScope.addGrid = function($event) {

        $rootScope.gridadded = true;

        $scope.manipulateGrid($event);

        var zoomFactor = $rootScope.getCurrentZoom() / 100;

        canvas.zoom(1);

        var width = canvas.fabric.getWidth();
        var height = canvas.fabric.getHeight();

        var j = 0;
        var line = null;
        var rect = [];
        $scope.size = 350;

        console.log(width + ":" + height);

        for (var i = 0; i < Math.ceil(width / 20); ++i) {
            rect[0] = i * $scope.size;
            rect[1] = 0;

            rect[2] = i * $scope.size;
            rect[3] = height;

            line = null;
            line = new fabric.Line(rect, {
                stroke: '#ccc',
                opacity: 0.8,
            });

            line.selectable = false;
            line.name = 'verticalGrid'
            canvas.fabric.fxAdd(line);
            // line.sendToBack();

        }

        for (i = 0; i < Math.ceil(height / 20); ++i) {
            rect[0] = 0;
            rect[1] = i * $scope.size;

            rect[2] = width;
            rect[3] = i * $scope.size;

            line = null;
            line = new fabric.Line(rect, {
                stroke: '#ccc',
                opacity: 0.8,
            });
            line.selectable = false;
            line.name = 'horizontalGrid'
            canvas.fabric.fxAdd(line);
            //  line.sendToBack();

        }

        canvas.fabric.renderAll();
        canvas.zoom(zoomFactor);

        canvas.fabric.on('object:moving', function(options) {
            if (Math.round(options.target.left / $scope.size * 8) % 8 == 0 &&
                Math.round(options.target.top / $scope.size * 8) % 8 == 0) {
                options.target.set({
                    left: Math.round(options.target.left / $scope.size) * $scope.size,
                    top: Math.round(options.target.top / $scope.size) * $scope.size
                }).setCoords();
            }
        });

    }](url)

The problem appears then I want to use sendBackwards and sendForwards for real objects (not grid). As fabric.js treats all of the grid lines as actual canvas objects sendBackwards and sendForwards starts to not make sense anymore.

And advice on this could help.

[samael205]

Hello,
I solved this by creating the Grid as a group, and managing the entire Grid as a single object. When I sendBackwards, from an object, to sendBackwards last of the Grid, and so I always have the Grid in the last position of the array.

[asturur]

if you want to semplify your code, assign the gridline as a group to backgroundImage if you want it under, to overlayImage of you want on top.

[ncou]

I think the overlay method support object, so if you create a group of lines for the grid and use it for the overlay, the problem for sendForward/Backward should no more exist.

You can also load an SVG string for the overlayImage (ex for the SVG : https://codepen.io/pigabo/pen/eAiLF)
EDIT : asturur was more quick than me :)

[asturur]

since the very common user request i think of building a non supported, non built in grid object.

i think it will faster than a group with many many lines. and fuzzy free

[butch2k]

Due to performance issues on large canvases with grid i made mine using a pattern rather than using line objects.

---

From: Andrea Bogazzi [e-mail]
Sent: Monday, May 8, 2017 12:30:57 PM
To: kangax/fabric.js
Cc: Subscribed
Subject: Re: [kangax/fabric.js] Grid lines and sendForwards/sendBackwards (#3914)

since the very common user request i think of building a non supported, non built in grid object.

i think it will faster than a group with many many lines. and fuzzy free

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/kangax/fabric.js/issues/3914#issuecomment-299831603, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AA6r4x2pPIYXLihOFlQnED_iYSAgfv9nks5r3u7hgaJpZM4NTlI6.

[asturur]

still you have to recalculate in on zoom working on big canvases is not a
great idea for real time editing. i prefer to work on normal size (up to
macbook 1440x900 with retina is 2880x1800) and use normal pan and zoom. i
get reasonable performances most of the time. when saving to image, that is
what most people use fabric for, exporting at 12kx12k is still reasonably
fast for a final export.

On May 8, 2017 12:33 PM, "Olivier Lefebvre" [e-mail]
wrote:

Due to performance issues on large canvases with grid i made mine using a
pattern rather than using line objects.

---

From: Andrea Bogazzi [e-mail]
Sent: Monday, May 8, 2017 12:30:57 PM
To: kangax/fabric.js
Cc: Subscribed
Subject: Re: [kangax/fabric.js] Grid lines and sendForwards/sendBackwards
(#3914)

since the very common user request i think of building a non supported, non
built in grid object.

i think it will faster than a group with many many lines. and fuzzy free

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub kangax/fabric.js/issues/3914#issuecomment-299831603>, or mute the thread<
https://github.com/notifications/unsubscribe-auth/AA6r4x2pPIYXLihOFlQnED_
iYSAgfv9nks5r3u7hgaJpZM4NTlI6>.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/3914#issuecomment-299832107,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QMCSemtrHRrZ54X7_4PqYta8857Vks5r3u-GgaJpZM4NTlI6
.

[wearehappybits]

I agree that performance is not the best with my solution. If canvas is of around 3000x3000 or more in size I get short lags which is not very acceptable.

[asturur]

unless you have very big screens, 3000x3000 is a size you should avoid.

[bernays]

I am trying to import the grid lines as an svg in the base of my canvas but fabricjs is only rendering it is a black box. any thoughts?

https://codepen.io/anon/pen/GEJyxe