petrus-zoom

用于控制缩放与拖动的组件

demo

http://pyrinelaw.github.io/petrus-zoom/demo/

version

0.0.1

如何使用

css 样式可以自由定义，这里只是为了方便使用贴了上来

.container {
    width: 800px;
    margin: 0 auto;
    margin-top: 100px;
}
.demo-zoom {
    .options-info {
        font-size: 12px;
        text-align: right;
        padding-bottom: 5px;
    }
    .tools {
        display: flex;
        font-size: 12px;
        justify-content: flex-end;
        flex-wrap: wrap-reverse;
        padding-bottom: 5px;
        button {
            margin-left: 5px;
        }
    }
    .content {
        height: 400px;
        border: 1px solid #C0C0C0;
        cursor: move;
        .wrap {
            height: calc(100%);
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-row-gap: 5px;
            grid-column-gap: 5px;
            div {
                border: 1px solid #C5C5C5;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 60px;
            }
        }
    }
}

import 'petrus-zoom/lib/style';
import Zoom from 'petrus-zoom';

<div className="container">
    <Zoom className="demo-zoom">
        {({ options, onZoomStep, onZoomTo, onPositionTo, onReset }) => (
            <React.Fragment>
                <div className="options-info">{JSON.stringify(options)}</div>
                <div className="tools">
                    <button onClick={() => onZoomStep(8)}>onZoomStep - out</button>
                    <button onClick={() => onZoomStep(-8)}>onZoomStep - in</button>
                    <button onClick={() => {
                        const randomValue = -10 + Math.ceil(Math.random() * 20);
                        onZoomTo(options.scale + randomValue);
                    }}>onZoomTo-随机缩放</button>
                    <button onClick={() => {
                        const randomValue = -20 + Math.ceil(Math.random() * 40);
                        onPositionTo({
                            x: options.position.x + randomValue,
                            y: options.position.y + randomValue,
                        });
                    }}>onPositionTo-随机移动</button>
                    <button onClick={() => {
                        onReset();
                    }}>onReset</button>
                </div>
                <Zoom.Content className="content">
                    <div className="wrap">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                    </div>
                </Zoom.Content>
            </React.Fragment>
        )}
    </Zoom>
</div>

Zoom

参数	类型	是否必填	默认值	说明
defaultOptions	Object	否	null	初始选项
className	className	否		传入样式名
style	Object	否	null	传入样式

附，初始选项：

{ 
    scale: 100, // 缩放值，必须为整数
    // 偏移位置
    position: { 
        x: 0,   // x 偏移
        y: 0    // y 偏移
    }
}

Zoom children 参数

参数	类型	是否必填	默认值	说明
options	Object	否		只读属性，当前位移对象
onZoomStep	Function	否		按步骤缩放，负数为减小, 例：onZoomTo(-10)
onZoomTo	Function	否		缩放至特定大小，100为不做任何缩放，例：onZoomTo(110)
onPositionTo	Function	否		位移至特定位置,例：onPositionTo({x: 0, y: 0})
onReset	Function	否		重置 options

Zoom Children 返回值

返回 React.Fragment 元素与数组都可以,例如

// 返回 React.Fragment
return (
    <React.Fragment>
        // ...
    <React.Fragment>
);
// 返回数组
return [
    <div>tool</div>
    <Zoom.Content>...</Zoom.Content>
];

Zoom.Content

参数	类型	是否必填	默认值	说明
className	className	否		传入样式名
style	Object	否	null	传入样式
justifyContent	string	否	center	与 css 属性 justifyContent 用法一致
transformOrigin	string	否	center	与 css 属性 transformOrigin 用法一致
children	React Dom	否	null	子元素宽度或者高度超出的情况下，超出部分会被隐藏