canvas+fabric实现时间刻度尺(一)

原创

已于 2025-01-01 11:08:10 修改 · 581 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#fabric #运维

于 2024-12-31 12:38:26 首次发布

前言

需求：显示一个时间刻度尺，鼠标移动会显示当前时间

技术：我们采用canvas+fabric进行实现

效果

实现

1.创建canvas（设置宽高）设为全局变量

2.引入fabric包

3.画时间刻度尺（长方形+横线）

4.增加鼠标移动事件并画虚线时间显示

5.增加鼠标离开事件并销毁虚线时间

<template>
  <div>
      <canvas id="rulerCanvas" width="1200" height="400"></canvas>
  </div>
</template>
<script setup>
import * as fabric  from 'fabric';
import {ref, onMounted} from 'vue';


const canvas = ref(null);

onMounted(() => {
  drawRuler();
});



let movDummyLine = null;
let movDummyLineText = null;


const onMouseMove = (options) => {

  if (options.pointer.x >= 40) {
    if (movDummyLine) {
      canvas.value.