rect-crop

Crop a dimension in a viewport: Compute a rectangle from a zoom ratio and a center point while preserving the dimension ratio.

The API

var rect = rectCrop(zoom, center)(viewport, dimension)

rectCrop computes an absolute Rectangle from relative parameters:

• zoom: a value in range ]0,1] which describe the crop zoom ratio. 1 is the full dimension size.
• center (default to [0.5, 0.5]): a [w,h] array where w and h are value in range [0,1] describing the desired center of the crop bound.

second parameters:

• viewport: a object with width and height which is the viewport rectangle (e.g: you can give a Canvas).
• dimension: an object with width and height which is the rectangle dimension to be cropped on the viewport (e.g: you can give an Image).

The crop will ensure that dimension ratio is preserved.

Returns

a [x, y, width, height] rectangle describing the area to crop in pixels.

Example

The following creates cropping functions:

rectCrop.largest == rectCrop(1) == rectCrop(1, [0.5, 0.5]) // The largest possible crop.
rectCrop(0.5) // A 2x zoomed crop
rectCrop(0.5, [0, 0.5]) // A 2x zoomed crop showing the left-middle part of a rectangle.

Typical usage:

var cropHalfCenter = rectCrop(0.5);
var rect = cropHalfCenter(canvas, image);
ctx.drawImage.apply(ctx, [ image ].concat(rect).concat([ 0, 0, canvas.width, canvas.height ]));

Other usage:

var rect = rectCrop(0.3, [0.2, 0.8])({width:800,height:600}, {width:4000,height:3000});
// rect == [ 200, 1950, 1200, 900 ]

var rect2 = rectCrop(0.1, [0, 0])({width:800,height:600}, {width:4000,height:3000});
// rect2 == [ -200, -150, 400, 300 ]

Note that this enable out of bounds crop. If you want to do not crop out of bounds parts, use rect-clamp:

rectClamped = rectClamp(rect2);
// rectClamped == [ 0, 0, 400, 300 ]