vue3实现刻度尺

期望实现效果如下:

一、基本使用

安装slide-ruler,根据文档实现内容

vue3实现刻度尺_第1张图片

https://github.com/wusb/slide-ruler/blob/master/README-zh_CN.md

二、进一步处理

1、直接复制slide-ruler核心文件,在此基础上进一步处理

vue3实现刻度尺_第2张图片

处理1:刻度朝向:

更改canvsa绘制时的起点和终点位置

vue3实现刻度尺_第3张图片

处理2:文字位置调整

vue3实现刻度尺_第4张图片

你可能感兴趣的:(小tips,vue.js,typescript,css)