fix: 新增标尺

2026-04-23 00:00:12 +08:00 · 2022-03-15 17:49:02 +08:00
parent 33b0c94159
commit 0933486e6f
8 changed files with 108 additions and 6 deletions
@@ -0,0 +1,68 @@
+<template>
+  <sketch-rule
+    :thick="thick"
+    :scale="scale"
+    :width="width"
+    :height="height"
+    :startX="startX"
+    :startY="startY"
+    :lines="lines"
+  ></sketch-rule>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartEditStore = useChartEditStore()
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+
+// 初始化标尺的缩放
+const scale = 2
+// x轴标尺开始的坐标数值
+const startX = 0
+// y轴标尺开始的坐标数值
+const startY = 0
+// 标尺的厚度
+const thick = 20
+// 初始化水平标尺上的参考线
+const lines = {
+  h: [],
+  v: []
+}
+</script>
+
+<style>
+/* 横线 */
+#mb-ruler .v-container .lines .line {
+  border-top: 1px dashed v-bind('themeColor') !important;
+}
+#mb-ruler .v-container .indicator {
+  border-bottom: 1px dashed v-bind('themeColor') !important;
+}
+/* 竖线 */
+#mb-ruler .h-container .lines .line {
+  border-left: 1px dashed v-bind('themeColor') !important;
+}
+#mb-ruler .h-container .indicator {
+  border-left: 1px dashed v-bind('themeColor') !important;
+}
+/* 坐标数值背景颜色 */
+#mb-ruler .indicator .value {
+  background-color: rgba(0, 0, 0, 0);
+}
+/* 删除按钮 */
+#mb-ruler .line .del {
+  padding: 0;
+  color: v-bind('themeColor');
+  font-size: 26px;
+  font-weight: bolder;
+}
+#mb-ruler .corner{
+  border-width: 0!important;
+}
+</style>