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

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;
        cursor: pointer;
    }

    .guides {
        position: absolute !important;
        top: 0;
        left: 0;
        transform: translateZ(1px);
    }

    .guides.horizontal {
        left: 30px;
        width: calc(100% - 30px);
        height: 30px !important;
    }

    .guides.vertical {
        top: 30px;
        height: calc(100% - 30px);
        width: 30px !important;
    }

    /* 
.scena-vertical .scena-guide {
height: calc(100% + 30px)!important;
top: -30px;
}
.scena-horizontal .scena-guide {
width: calc(100% + 30px)!important;
top: -30px;
} */
    .viewer {
        position: absolute !important;
        left: 30px;
        top: 30px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }

    .viewport {
        text-align: center;
    }

    .viewport p {
        padding: 0;
        margin: 0;
    }

    .buttons {
        padding: 5px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #333;
        color: #333;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 1px;
        margin: 2px;
    }

    .viewport p.description {
        text-align: left;
        padding: 5px 20px;
        box-sizing: border-box;
    }

    .component {
        display: inline-block;
        padding: 5px;
        margin-bottom: 10px;
    }

    .component p {
        padding: 0;
        margin: 0;
    }

    .component .logo {
        position: relative;
        width: 150px;
        height: 150px;
    }

    .component img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;
        max-height: 100%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
    }

    .component a {
        color: black;
        font-weight: bold;
    }
</style>
<div class="app">
    <div class="reset"></div>
    .........完整代码请登录后点击上方下载按钮下载查看