|
@@ -78,11 +78,17 @@
|
|
>,<span style="color: blue">Y轴 {{ yArrow }}</span>
|
|
>,<span style="color: blue">Y轴 {{ yArrow }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div v-if="areaWidth > 50 && areaHeight > 50" class="info-toggle" @click="showInfo = !showInfo">
|
|
|
|
- <QuestionCircleOutlined />
|
|
|
|
|
|
+ <div v-if="areaWidth > 50 && areaHeight > 50" class="info-toggle">
|
|
|
|
+ <a-switch
|
|
|
|
+ v-model:checked="showAxis"
|
|
|
|
+ size="small"
|
|
|
|
+ checked-children="展示坐标"
|
|
|
|
+ un-checked-children="隐藏坐标"
|
|
|
|
+ />
|
|
|
|
+ <QuestionCircleOutlined @click="showInfo = !showInfo" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div class="full-coordinate-axes">
|
|
|
|
|
|
+ <div class="full-coordinate-axes" v-if="showAxis">
|
|
<div class="axis-line x-axis" :style="getFullAxisStyle('x')"> </div>
|
|
<div class="axis-line x-axis" :style="getFullAxisStyle('x')"> </div>
|
|
<div class="axis-line y-axis" :style="getFullAxisStyle('y')"> </div>
|
|
<div class="axis-line y-axis" :style="getFullAxisStyle('y')"> </div>
|
|
</div>
|
|
</div>
|
|
@@ -192,6 +198,7 @@ const areaStyle = computed(() => ({
|
|
|
|
|
|
// 区域信息展示开关(点击问号按钮切换)
|
|
// 区域信息展示开关(点击问号按钮切换)
|
|
const showInfo = ref(false)
|
|
const showInfo = ref(false)
|
|
|
|
+const showAxis = ref(false)
|
|
|
|
|
|
const northArrow = computed(() => {
|
|
const northArrow = computed(() => {
|
|
switch (angle.value) {
|
|
switch (angle.value) {
|
|
@@ -342,6 +349,10 @@ function getAxisDotStyle(axis: 'x' | 'y') {
|
|
transition: background 0.2s;
|
|
transition: background 0.2s;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
opacity: 0.5;
|
|
opacity: 0.5;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 4px;
|
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
background: rgba(0, 0, 0, 0.1);
|