前端实现画布刻度尺

最新推荐文章于 2024-02-27 16:02:18 发布

程序大白兔

最新推荐文章于 2024-02-27 16:02:18 发布

阅读量891

点赞数 1

分类专栏： Web前端文章标签：前端 css css3 javascript html

本文链接：https://blog.csdn.net/m0_46641774/article/details/127048999

版权

Web前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

话不多说直接上代码

css代码：

<style>

        .main-wrapper {
            position: fixed;
            top: 100px;
            left: 355px;
            right: 10px;
            z-index: 1;
            bottom: 0;
            overflow: auto;
            -webkit-transition: left 0.28s;
            transition: left 0.28s;
        }

        .ruler {
            position: fixed; /*位置  固定的*/
            background-color: #303030; /*背景颜色*/
            background-image: linear-gradient(90deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(180deg, #303030 50%, transparent 50%), linear-gradient(90deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(180deg, #303030 70%, transparent 70%), linear-gradient(90deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
            background-size: 50px 30px; /*指定背景图像大小*/
            background-repeat: repeat-x; /*背景图像的重复方式*/
            min-height: 30px;
            z-index: 1;
        }

            .ruler.v {
                position: absolute;
                left: 0;
                top: 30px;
                transform-origin: 0 0;
                height: 30px;
                width: 1050px;
                background-position: 0 100%;
                transform: rotate(-90deg) translateX(-100%);
                border-bottom: 1px solid #696969;
            }

            .ruler.h {
                position: absolute;
                height: 30px;
                width: 100%;
                border-left: 30px solid #535353;
                border-bottom: 1px solid #696969;
                background-position: 0 100%;
            }

        .scale {
            list-style-type: none;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            color: #b1b4b4;
            font-size: 0;
            text-shadow: 0px 1px 1px #000;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }

            .scale li {
                display: inline-block;
                width: 50px;
                text-align: right;
                padding-right: 2px;
                font-size: 11px;
            }

        .ruler.h input[type="range"]::-webkit-slider-thumb {
            transform: translateY(30px);
        }

        .ruler.h input[type="range"]::-moz-range-thumb {
            transform: translateY(30px);
        }

        .ruler.h .line .tempLine {
            display: none;
            position: absolute;
            top: 30px;
            left: 50px;
            width: 1px;
            height: 3000px;
            background: #f00;
        }

        .ruler.h .line .dragLine {
            cursor: e-resize;
        }


        .ruler.h .line li {
            position: absolute;
            top: 30px;
            left: 10px;
            width: 1px;
            height: 3000px;
            background: #1ee5f7;
        }

        .ruler.v .scale li {
            text-align: left;
        }

        .ruler.v .line {
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: 0 0;
            height: 30px;
            width: 100%;
        }

            .ruler.v .line .tempLine {
                display: none;
                position: absolute;
                top: 30px;
                left: 50px;
                width: 1px;
                height: 3000px;
                background: #f00;
            }

            .ruler.v .line .dragLine {
                cursor: s-resize;
            }


            .ruler.v .line li {
                position: absolute;
                top: 30px;
                left: 10px;
                width: 1px;
                height: 3000px;
                background: #1ee5f7;
            }
    </style>

HTML代码：

 <div>
            <!-- class="ruler" -->
            <div>
                <div class="ruler h">
                    <ul class="scale">
                        <li>0</li>
                        <li>50</li>
                        <li>100</li>
                        <li>150</li>
                        <li>200</li>
                        <li>250</li>
                        <li>300</li>
                        <li>350</li>
                        <li>400</li>
                        <li>450</li>
                        <li>500</li>
                        <li>550</li>
                        <li>600</li>
                        <li>650</li>
                        <li>700</li>
                        <li>750</li>
                    </ul>
                    <!--  <ul class="line">
                          <li class="tempLine"></li>
                      </ul> -->
                </div>
                <div class="ruler v">
                    <ul class="scale">
                        <li>950</li>
                        <li>900</li>
                        <li>850</li>
                        <li>800</li>
                        <li>750</li>
                        <li>700</li>
                        <li>650</li>
                        <li>600</li>
                        <li>550</li>
                        <li>500</li>
                        <li>450</li>
                        <li>400</li>
                        <li>350</li>
                        <li>300</li>
                        <li>250</li>
                        <li>200</li>
                        <li>150</li>
                        <li>100</li>
                        <li>50</li>
                        <li>0</li>
                    </ul>
                    <!--  <ul class="line">
                          <li class="tempLine"></li>
                      </ul> -->
                </div>
            </div>
            <div style="border: 1px solid red;width: 1900px;height: 1500px;"></div>
        </div>

以上功能还需要调一下。但我没调出来，欢迎大家讨论已经为我解答疑惑。谢谢！