rect-cover
v1.0.0
Published
Computes a transform between two rectangles the same way as background-size cover
Downloads
21
Readme
rect-cover (demo)
Computes a transform between two rectangles the same way as
background-size: cover
.
Intro
Simulating background-size: cover
is very useful for canvas animations, drawing sprites in games, and rendering videos. This module is used as part of our video rendering pipeline at Automagical.
Install
npm install --save rect-cover
Usage
Check out the demo to understand what this module does.
const rectCover = require('rect-cover')
const {
scale,
translate
} = rectCover({ width: 500, height: 500 }, { width: 1280, height: 720 })
// CSS transforms apply the rightmost operation first.
// Note that this assumes a transform-origin of `top left`.
const transform = `translate(${translate.x}px, ${translate.y}px) scale(${scale})`
API
rectCover(viewport, image)
Returns a 2D affine transform defined by { scale: Number, translate: { x: Number, y: Number } }
such that the given image
will fully cover the viewport
while maintaining its original aspect ratio.
Note that you'll want to apply the scale
transform first followed by the translate
.
viewport
Type: { width: Number, height: Number }
The viewport you want to draw the image into.
image
Type: { width: Number, height: Number }
The dimensions of the image to be drawn.
Related
- rect-contain
- rect-crop if you need to mimic rect-cover with a
zoom
ratio andcenter
point (eg, for kenburns effects) - css background-size
License
MIT © Travis Fischer