demo)
rect-cover (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 = const scale translate } = // CSS transforms apply the rightmost operation first.// Note that this assumes a transform-origin of `top left`.const transform = `translate(px, px) 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