guides+infinite-viewer实现带标尺无边界随意拖动放大的画布效果代码

代码语言:html

所属分类:拖放

代码描述:guides+infinite-viewer实现带标尺无边界随意拖动放大的画布效果代码

代码标签: guides infinite-viewer 标尺 无边界 随意 拖动 放大 画布

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
    html,
    body,
    #root,
    .app {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        color: #333;
        background: #fdfdfd;
        overscroll-behavior: none;
    }

    .app {
        transform-style: preserve-3d;
    }

    .viewer {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .viewport {
        width: 400px;
        /* height: 600px; */
        border: 1px solid #eee;
        box-sizing: border-box;
    }

    .reset {
        position: absolute !important;
        background: #333;
        width: 30px;
        height: 30px;
        z-index: 1;
        border-right: 1px solid #444;
        border-bottom: 1px solid #444;
        box-sizing: border-box;
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0