CODEWITHSUNDEEP
javascriptcanvasfabricjs
Saurabh Udaniya
Saurabh Udaniya

Reputation: 478

fabric js - Resize complete canvas according to a rectangle added in a canvas in order to achieve cropping

I am using fabric js for generating templates, I want user to set height and width of a canvas for which I am using following code

canvas.setHeight(height);
canvas.setWidth(width);

However on doing this, the full width canvas stretches itself and the object disappears from the resized canvas as it was lets say 500 px wide before and user resized it to 100px then the items disappear.

I want to achieve a functionality so that if a user wants to change the size of canvas then instead of resizing the canvas I will show a rectangle and user can move rectangle accordingly to get the visible area and once user clicks on save then I will resize the canvas according to that rectangle, so that I can process the SVG later for further conversions but by doing so I am not sure how to get the visible area in that rectangle to the resized canvas, in short I want functionality like Darkroom js but for fabric js canvas object.

The current functionality is added to this JS fiddle http://jsfiddle.net/tbqrn/102/

Upvotes: 2

Views: 2635

Answers (1)

Saurabh Udaniya
Saurabh Udaniya

Reputation: 478

Finally after doing some research I am able to do that, instead of resizing the canvas I am adding a rectangle object with "cropper" type as mentioned below

var rect = new fabric.Rect({
                    left: 100,
                    top: 100,
                    fill: 'transparent',
                    width: 400,
                    height: 400,
                    strokeDashArray: [5, 5],
                    stroke: 'black',
                    type: 'cropper',
                    lockScalingX: true,
                    lockScalingY: true,
                    lockRotation: true
                });
                canvas.add(rect);

This rectangle will serve as the cropper, when a user submits the form then I am getting that cropper's dimensions as follow along with changing canvas size

            var i;
            var croppedLeft = 0;
            var croppedTop = 0;
            var canvasJson = canvas.getObjects();
            // Cropping canvas according to cropper rectangle
            if (canvas.getObjects().length > 0) {
                var i;
                for (i = 0; i < canvas.getObjects().length; i++) {
                    if (canvas.getObjects()[i].type == 'cropper') {
                        croppedLeft = canvas.getObjects()[i].left;
                        croppedTop = canvas.getObjects()[i].top;
                        canvas.setHeight(canvas.getObjects()[i].height);
                        canvas.setWidth(canvas.getObjects()[i].width);
                        canvas.getObjects()[i].remove();
                    }
                }
            }

And after that I am shifting all the other canvas objects accordingly as follow.

for (i = 0; i < canvasJson.length; i++) {
                canvas.getObjects()[i].left = canvas.getObjects()[i].left - croppedLeft
                canvas.getObjects()[i].top = canvas.getObjects()[i].top - croppedTop
                canvas.renderAll();
            }

And after doing that I am able to achieve the desired functionality, hope this helps someone.

Here is my fiddle http://jsfiddle.net/tbqrn/115/

Upvotes: 3

Related Questions