高端品牌网站建设制作多少钱公司注册资金500万

刻度尺组件，可支持横向、纵向，同时支持通过缩放比调节缩放比例。在一些可视化设计组件中使用。

截图

横向刻度尺

纵向刻度尺

参数说明

• layout?: ‘horizontal’ | ‘vertical’，标尺方向，默认为：horizontal；

• scale: number，缩放比；

• rulerColor?: string，标尺颜色默认为：#000000;

• labelColor?: string，标尺刻度数字颜色默认为：#000000

• mousemove(position: number): void，鼠标移动时触发;

• click(position: number): void，鼠标点击时触发;

组件源码

<!--* @Description: 刻度尺组件* @Author: wang keju* @Email: git config user.email* @Date: 2025-03-04 07:12:35* @LastEditTime: 2025-03-04 07:35:06* @LastEditors: wang keju
-->
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'type Props = {layout?: 'horizontal' | 'vertical';scale: number;rulerColor?: string;labelColor?: string;
}const props = withDefaults(defineProps<Props>(), {layout: 'horizontal',rulerColor: '#000000',labelColor: '#000000',
})const emits = defineEmits<{(event: 'mousemove', position: number): void(event: 'click', position: number): void
}>()const canvasRef = ref<HTMLCanvasElement>()onMounted(draw)
watch(props, draw)/*** @description: 根据布局方向，绘制标尺* @return {*}*/
function draw () {drawSketchRuler()
}/*** @description: 绘制刻度* @return {void}*/
function drawSketchRuler() {const canvas = canvasRef.valueif (!canvas) returnconst containerRect = canvas.getBoundingClientRect()canvas.width = containerRect.widthcanvas.height = containerRect.heightconst ctx = canvas.getContext('2d')if (!ctx) return// 清空画布ctx.clearRect(0, 0, containerRect.width, containerRect.height)// 设置线条样式ctx.strokeStyle = props.rulerColorctx.lineWidth = 1// 绘制标尺刻度数字ctx.font = '12px Arial'ctx.textAlign = 'center'ctx.textBaseline = 'top'ctx.fillStyle = props.labelColorconst scale = props.scaleconst rulerConfig = [{ min: 8, max: 10, minSketch: 0.5, middleSketch: 2.5, maxSketch: 5 },{ min: 4, max: 8, minSketch: 1, middleSketch: 5, maxSketch: 10 },{ min: 2, max: 4, minSketch: 2, middleSketch: 10, maxSketch: 20 },{ min: 1, max: 2, minSketch: 5, middleSketch: 25, maxSketch: 50 },{ min: 0.5, max: 1, minSketch: 10, middleSketch: 500, maxSketch: 100 },{ min: 0.3, max: 0.5, minSketch: 20, middleSketch: 100, maxSketch: 200 },{ min: 0.1, max: 0.3, minSketch: 50, middleSketch: 250, maxSketch: 500 },{ min: 0.01, max: 0.1, minSketch: 100, middleSketch: 500, maxSketch: 1000 },]let info = scale >= 10 ? rulerConfig[0] : rulerConfig.find((item) => item.min <= scale && scale < item.max)if (!info) returnconst { minSketch, middleSketch, maxSketch } = infoif (props.layout === 'horizontal') {for (let i = 0; i <= containerRect.width / scale; i += 1) {const point = i * props.scaleif (i % maxSketch === 0) {ctx.beginPath()ctx.moveTo(point, 0)ctx.lineTo(point, 14)ctx.stroke()i !== 0 && ctx.fillText(String(i), point, 16);} else if (i % middleSketch === 0) {ctx.beginPath()ctx.moveTo(point, 0)ctx.lineTo(point, 10)ctx.stroke()} else if (i % minSketch === 0) {ctx.beginPath();ctx.moveTo(point, 0)ctx.lineTo(point, 6)ctx.stroke()}}} else {for (let i = 0; i <= containerRect.height / scale; i += minSketch) {const point = i * props.scaleif (i % maxSketch === 0) {ctx.beginPath()ctx.moveTo(0, point)ctx.lineTo(14, point)ctx.stroke()} else if (i % middleSketch === 0) {ctx.beginPath()ctx.moveTo(0, point)ctx.lineTo(10, point)ctx.stroke()} else if (i % minSketch === 0) {ctx.beginPath()ctx.moveTo(6, point)ctx.lineTo(0, point)ctx.stroke()}}// 纵向标尺，绘制纵向文本ctx.rotate(-Math.PI / 2);for (let i = 0; i <= containerRect.height / Math.min(scale, 1); i += minSketch) {const point = i * props.scaleif (i % maxSketch === 0) {if (i !== 0) {ctx.fillText(String(i), -point, 16)}}}ctx.restore()}
}/*** @description: 点击标尺触发* @param {MouseEvent} e* @return {void}*/
const onClick =  (e: MouseEvent) => {const position = props.layout === 'horizontal'? (e.offsetX) / props.scale: (e.offsetY) / props.scaleemits('click', Math.ceil(position * 10) / 10)
}/*** @description: * @param {MouseEvent} e* @return {void}*/
const onMousemove = (e: MouseEvent) => {const current = props.layout === 'horizontal' ? e.layerX / props.scale : e.layerY / props.scaleemits('mousemove', Math.ceil(current * 10) / 10)
}</script><template><canvas style="width: 100%; height: 100%;" ref="canvasRef" @click="onClick" @mousemove="onMousemove" />
</template>