canvas+fabric实现时间刻度尺+长方形数据展示

前言

我们前面实现了时间刻度尺，现在在时间刻度尺里面画一个长方形，长方形里面有数据展示。

效果

实现

1.先实现时间刻度尺

2.鼠标移动、按下事件监听并画出对应效果

3.在刻度尺里面画对应的长方形数据展示

<template>
  <div>
      <canvas id="rulerCanvas" width="1200" height="400"></canvas>

      <div style="margin-top: 20px">
          <el-button type="primary" @click="test0">添加空标记</el-button>
          <el-button type="primary" @click="test1">添加锅</el-button>
          <el-button type="primary" @click="test2">添加用料</el-button>
          <el-button type="primary" @click="test3">添加菜盒</el-button>
          <el-button type="primary" @click="test4">添加结束录制</el-button>
          <el-button type="primary" @click="test5" plain>清空全部</el-button>
      </div>

      <div style="margin-top: 20px">
          <span style="margin-right: 6px">开启鼠标弹框</span><el-switch v-model="value1" />
      </div>

      <el-dialog v-model="dialogVisible" title="添加调料" width="500">
          <div>
              <el-input v-model="input1" style="width: 240px" />
          </div>
          <div style="margin-top: 10px">
              <el-input v-model="input2" style="width: 240px" />
          </div>
          <template #footer>
              <div>
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogConfirm">确认</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>
<script setup>
import * as fabric  from 'fabric';
import {ref, onMounted} from 'vue';

const value1 = ref(false);
const dialogVisible = ref(false);
const input1 = ref("测试商品名称");
const input2 = ref("");
const dialogConfirm = () => {
  dialogVisible.value = false;
  console.log("====添加====")
};

let left = 40;

const test0 = () => {
  draw0();
};
const test1 = () => {
  draw1()
};
const test2 = () => {
  draw();
};
const test3 = () => {
  draw();
};
const test4 = () => {
  draw4();
};
const test5 = () => {
  console.log("清空全部");
  // canvas.value.clear();
};

const canvas = ref(null);

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


// const onClickItem = ref(false);

const onMouseDown = (options) => {
  if (value1.value) {
    console.log("====onMouseMove====", options);
    let startNumber = options.pointer.x - 40;
    let timeNumber = parseInt(startNumber / 20);
    input2.value = timeToStr(timeNumber);
    dialogVisible.value = true;
  }
};

let movDummyLine = null;