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;
let movDummyLineText = null;let group = null;
let dummyLineText = null;// 空标记
const draw0 = () => {group = new fabric.Group([], {left: left,top: 40,width: 150,height: 400,selectable: true,lockMovementY: true,// 添加以下属性来隐藏边界框和控制点hasBorders: false,hasControls: false,hasRotatingPoint: false,});left = left + 150 + 20;group.on('selected', (e) => {console.log('组被选中', e);});// 为组添加移动事件监听器group.on('moving', () => {if (group.left >= 40) {let startNumber = group.left - 40 + 20;let timeNumber = parseInt(startNumber / 20);dummyLineText.set('text', timeToStr(timeNumber));}});const rect = new fabric.Rect({left: 0,top: 0,width: 150,height: 400,fill: '#d8f2ed',selectable: false,lockMovementY: true,}).set({left: group.left - 3, top: group.top});group.add(rect);// 添加虚线const dummyLine = new fabric.Line([0, 800, 1, 0], {stroke: 'red',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: group.left, top: group.top});group.add(dummyLine);const line = new fabric.Line([0, 800, 2, 0], {stroke: '#3cbca3',strokeWidth: 2,selectable: true,lockMovementY: true,}).set({ left: group.left, top: group.top });group.add(line);const titleText = new fabric.Text("空标记", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left + 4, top: group.top + 4 });group.add(titleText);// 刻度时间dummyLineText = new fabric.Text("00:00", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left - 10, top: group.top - 20});group.add(dummyLineText);// 将组添加到画布上canvas.value.add(group);// 激活组的选择功能(选中该分组)// canvas.value.setActiveObject(group);
};// 锅设置
const draw1 = () => {group = new fabric.Group([], {left: left,top: 220,selectable: true,lockMovementY: true,// 添加以下属性来隐藏边界框和控制点hasBorders: false,hasControls: false,hasRotatingPoint: false,});left = left + 150 + 20;group.on('selected', (e) => {console.log('组被选中', e);});// 为组添加移动事件监听器group.on('moving', () => {if (group.left >= 40) {let startNumber = group.left - 40 + 20;let timeNumber = parseInt(startNumber / 20);dummyLineText.set('text', timeToStr(timeNumber));}});const rect = new fabric.Rect({left: 0,top: 0,width: 150,height: 180,fill: '#fff0e7',selectable: false,lockMovementY: true,}).set({left: group.left - 3, top: group.top});group.add(rect);const line = new fabric.Line([0, 180, 2, 0], {stroke: '#fc9153',strokeWidth: 2,selectable: true,lockMovementY: true,}).set({ left: group.left, top: group.top });group.add(line);// 添加虚线const dummyLine = new fabric.Line([0, 800, 1, 0], {stroke: 'red',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: group.left, top: group.top});group.add(dummyLine);const titleText = new fabric.Text("锅设置为xxxx", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left + 4, top: group.top + 4 });group.add(titleText);// 创建灰色背景的小矩形const textBackground = new fabric.Rect({left: group.left + 10,top: group.top + 20,width: 70,height: 35,fill: '#fbfbfb',selectable: false,rx: 4,});group.add(textBackground);const text = new fabric.Text('测试文字', {left: group.left + 10,top: group.top + 20,fontSize: 12,fill: 'black',textAlign: 'center',selectable: false,});text.set({top: text.top + textBackground.height / 2 - text.height / 2,left: text.left + textBackground.width / 2 - text.width / 2,});group.add(text);// 刻度时间dummyLineText = new fabric.Text("00:00", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left - 10, top: group.top - 20});group.add(dummyLineText);// 将组添加到画布上canvas.value.add(group);// 激活组的选择功能(选中该分组)// canvas.value.setActiveObject(group);
};// 用料、菜盒
const draw = () => {group = new fabric.Group([], {left: left,top: 40,width: 150,height: 400,selectable: true,lockMovementY: true,// 添加以下属性来隐藏边界框和控制点hasBorders: false,hasControls: false,hasRotatingPoint: false,});left = left + 150 + 20;group.on('selected', (e) => {console.log('组被选中', e);});// 为组添加移动事件监听器group.on('moving', () => {if (group.left >= 40) {let startNumber = group.left - 40 + 20;let timeNumber = parseInt(startNumber / 20);dummyLineText.set('text', timeToStr(timeNumber));}});const rect = new fabric.Rect({left: 0,top: 0,width: 150,height: 400,fill: '#e1efff',selectable: false,lockMovementY: true,}).set({left: group.left - 3, top: group.top});group.add(rect);// 添加虚线const dummyLine = new fabric.Line([0, 800, 1, 0], {stroke: 'red',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: group.left, top: group.top});group.add(dummyLine);const line = new fabric.Line([0, 800, 2, 0], {stroke: '#288bfd',strokeWidth: 2,selectable: true,lockMovementY: true,}).set({ left: group.left, top: group.top });group.add(line);const titleText = new fabric.Text("自动投放猪油11g", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left + 4, top: group.top + 4 });group.add(titleText);// 创建灰色背景的小矩形const textBackground = new fabric.Rect({left: group.left + 10,top: group.top + 20,width: 70,height: 35,fill: '#fbfbfb',selectable: false,rx: 4,});group.add(textBackground);const text = new fabric.Text('测试文字', {left: group.left + 10,top: group.top + 20,fontSize: 12,fill: 'black',textAlign: 'center',selectable: false,});text.set({top: text.top + textBackground.height / 2 - text.height / 2,left: text.left + textBackground.width / 2 - text.width / 2,});group.add(text);// 刻度时间dummyLineText = new fabric.Text("00:00", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left - 10, top: group.top - 20});group.add(dummyLineText);// 将组添加到画布上canvas.value.add(group);// 激活组的选择功能(选中该分组)// canvas.value.setActiveObject(group);
};// 结束录制
const draw4 = () => {group = new fabric.Group([], {left: 1150,top: 40,width: 150,height: 400,selectable: true,lockMovementY: true,// 添加以下属性来隐藏边界框和控制点hasBorders: false,hasControls: false,hasRotatingPoint: false,});left = left + 150 + 20;group.on('selected', (e) => {console.log('组被选中', e);});// 为组添加移动事件监听器group.on('moving', () => {if (group.left >= 40) {let startNumber = group.left - 40 + 20;let timeNumber = parseInt(startNumber / 20);dummyLineText.set('text', timeToStr(timeNumber));}});const rect = new fabric.Rect({left: 0,top: 0,width: 50,height: 400,fill: '#ff4d4f',selectable: false,lockMovementY: true,}).set({left: group.left - 3, top: group.top});group.add(rect);// 添加虚线const dummyLine = new fabric.Line([0, 800, 1, 0], {stroke: '#222',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: group.left, top: group.top});group.add(dummyLine);const titleText = new fabric.Text("烹\n饪\n结\n束", {fontSize: 16,fill: '#fff',selectable: false,textAlign: 'center',}).set({ left: group.left + 14, top: 180 });group.add(titleText);// 刻度时间dummyLineText = new fabric.Text("00:00", {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: group.left - 10, top: group.top - 20});group.add(dummyLineText);// 将组添加到画布上canvas.value.add(group);// 激活组的选择功能(选中该分组)// canvas.value.setActiveObject(group);
};const onMouseMove = (options) => {// console.log("====onMouseMove====", options);// console.log("====onMouseMove====", options.pointer.x);// let testStr = "00:28";// console.log(testStr, "======================", strToTime(testStr));if (options.pointer.x >= 40) {if (movDummyLine) {canvas.value.remove(movDummyLine);canvas.value.remove(movDummyLineText);}// 添加虚线movDummyLine = new fabric.Line([0, 800, 1, 0], {stroke: 'red',strokeDashArray: [5, 5],strokeWidth: 1,selectable: false,}).set({ left: options.pointer.x, top: 36 });canvas.value.add(movDummyLine);// group.add(movDummyLine);// 添加文字  (options.pointer.x)let startNumber = options.pointer.x - 40 + 20;let timeNumber = parseInt(startNumber / 20);movDummyLineText = new fabric.Text(timeToStr(timeNumber), {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: options.pointer.x - 12, top: 20 });canvas.value.add(movDummyLineText);// group.add(movDummyLineText);}};const drawRuler = () => {canvas.value = new fabric.Canvas('rulerCanvas');// 鼠标事件canvas.value.on('mouse:move', onMouseMove);canvas.value.on('mouse:down', onMouseDown);canvas.value.on('mouse:out', () => {if (movDummyLine) {canvas.value.remove(movDummyLine);canvas.value.remove(movDummyLineText);movDummyLine = null;movDummyLineText = null;}});// 时间刻度const startHour = 0;const startMinute = 0;const intervalMinutes = 5; // 间隔const totalHours = 1; // 当前刻度时间let currentMinute = startMinute;let currentHour = startHour;// 长方形const rect = new fabric.Rect({left: 0,top: 0,width: 1100,height: 40,fill: '#fff',strokeWidth: 1, // 边框宽度selectable: false,});canvas.value.add(rect);// 底部边框const bottomBorder = new fabric.Line([0, 40, 1200, 40], {stroke: '#000000',strokeWidth: 1,selectable: false,});canvas.value.add(bottomBorder);// 时间刻度for (let i = 0; i <= totalHours * 60; i += intervalMinutes) {const x = (i / (totalHours * 60)) *  canvas.value.width + 40;const timeText = formatTime(currentHour, currentMinute);// 画刻度线const b = new fabric.Line([x, 50, x, 60], {stroke: 'black',strokeWidth: 1,selectable: false,}).set({ left: x, top: 28 });canvas.value.add(b);// 添加时间文本const a = new fabric.Text(timeText, {fontSize: 12,fill: 'black',selectable: false,textAlign: 'center',}).set({ left: x-14, top: 10 });canvas.value.add(a);// 更新分钟和小时currentMinute += intervalMinutes;if (currentMinute >= 60) {currentMinute = 0;currentHour++;}}
};const formatTime = (hour, minute) => {return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
};// const strToTime = (str) => {
//   let parts = str.split(':');
//   return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
// };const timeToStr = (seconds) => {const minutes = Math.floor(seconds / 60);const secs = seconds % 60;const paddedMinutes = String(minutes).padStart(2, '0');const paddedSeconds = String(secs).padStart(2, '0');return `${paddedMinutes}:${paddedSeconds}`;
};
</script>
<style>#rulerCanvas {border: 1px solid black;}
</style>

如果侵权请联系我删除。