前端实现画布刻度尺

话不多说直接上代码

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>

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现echarts中的尺子刻度,可以使用以下代码: ```javascript progressChart() { let myEcharts = echarts.init(this.$refs.progressChart); var option = { grid: { left: "1%", right: "60%", top: "10px", bottom: "30px", containLabel: true, }, xAxis: { type: "category", boundaryGap: true, show: false, }, yAxis: { min: 1, max: 200, splitNumber: 6, type: "value", axisTick: { show: true, length: 4, lineStyle: { color: "#fff", }, }, axisLine: { show: true, lineStyle: { color: "#fff", }, }, splitLine: { show: false, }, axisLabel: { show: true, color: "#fff", }, }, series: \[ { data: \[20\], type: "bar", barWidth: 10, itemStyle: { color: "#00ff00", }, }, \], }; myEcharts.setOption(option); }, ``` 这段代码使用了echarts的初始化方法`echarts.init()`来创建一个echarts实例,并通过`setOption()`方法设置了相关的配置项。其中,通过设置`xAxis`和`yAxis`的相关属性来控制尺子刻度的显示,如`axisTick`设置刻度线的样式,`axisLine`设置刻度线的样式,`splitLine`设置分割线的显示与否,`axisLabel`设置刻度标签的样式。最后,通过`series`设置了一个柱状图的数据和样式。 希望对你有帮助! #### 引用[.reference_title] - *1* [Android自定义-⭐️画布认识⭐️](https://blog.csdn.net/m0_37667770/article/details/114080499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts实现刻度尺](https://blog.csdn.net/sunyiuhang/article/details/122415977)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts X轴像直尺一样设置刻度](https://blog.csdn.net/qq_39304623/article/details/109815876)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值