@vx/Zoom
Installation
npm install --save @vx/zoom
Components
API
<Zoom />
# Zoom.children<func> required
# Zoom.constrain<func>
By default constrain() will only constrain scale values. To change constraints you can pass in your own constrain function as a prop.
For example, if you wanted to constrain your view to within [[0, 0], [width, height]]:
function constrain(transformMatrix, prevTransformMatrix) {
const min = applyMatrixToPoint(transformMatrix, { x: 0, y: 0 });
const max = applyMatrixToPoint(transformMatrix, { x: width, y: height });
if (max.x < width || max.y < height) {
return prevTransformMatrix;
}
if (min.x > 0 || min.y > 0) {
return prevTransformMatrix;
}
return transformMatrix;
}
@param {matrix} transformMatrix @param {matrix} prevTransformMatrix @returns {martix}
# Zoom.height<number> required
# Zoom.scaleXMax<number>
Default | Infinity |
# Zoom.scaleXMin<number>
Default | 0 |
# Zoom.scaleYMax<number>
Default | Infinity |
# Zoom.scaleYMin<number>
Default | 0 |
# Zoom.transformMatrix<shape[object Object]>
Default | { scaleX: 1, scaleY: 1, translateX: 0, translateY: 0, skewX: 0, skewY: 0 } |
# Zoom.wheelDelta<func>
wheelDelta(event.deltaY)
A function that returns {scaleX,scaleY} factors to scale the matrix by. Scale factors greater than 1 will increase (zoom in), less than 1 will descrease (zoom out).
Default | event => { return -event.deltaY > 0 ? { scaleX: 1.1, scaleY: 1.1 } : { scaleX: 0.9, scaleY: 0.9 }; } |
# Zoom.width<number> required