制作需求

src/components/base/components/icon/iconfont/demo_index.html

@@ -55,6 +55,36 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7b8;</span>
+                <div class="name">stone</div>
+                <div class="code-name">&amp;#xe7b8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b9;</span>
+                <div class="name">range</div>
+                <div class="code-name">&amp;#xe7b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b5;</span>
+                <div class="name">rotate_h</div>
+                <div class="code-name">&amp;#xe7b5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b6;</span>
+                <div class="name">height_g</div>
+                <div class="code-name">&amp;#xe7b6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b7;</span>
+                <div class="name">scale_h</div>
+                <div class="code-name">&amp;#xe7b7;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7b3;</span>
                 <div class="name">rb_y</div>
                 <div class="code-name">&amp;#xe7b3;</div>
@@ -1026,9 +1056,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1692587913655') format('woff2'),
-       url('iconfont.woff?t=1692587913655') format('woff'),
-       url('iconfont.ttf?t=1692587913655') format('truetype');
+  src: url('iconfont.woff2?t=1695894601293') format('woff2'),
+       url('iconfont.woff?t=1695894601293') format('woff'),
+       url('iconfont.ttf?t=1695894601293') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -1055,6 +1085,51 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-stone"></span>
+            <div class="name">
+              stone
+            </div>
+            <div class="code-name">.icon-stone
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-range"></span>
+            <div class="name">
+              range
+            </div>
+            <div class="code-name">.icon-range
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rotate_h"></span>
+            <div class="name">
+              rotate_h
+            </div>
+            <div class="code-name">.icon-rotate_h
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-height_g"></span>
+            <div class="name">
+              height_g
+            </div>
+            <div class="code-name">.icon-height_g
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-scale_h"></span>
+            <div class="name">
+              scale_h
+            </div>
+            <div class="code-name">.icon-scale_h
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-rb_y"></span>
             <div class="name">
               rb_y
@@ -2514,6 +2589,46 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-stone"></use>
+                </svg>
+                <div class="name">stone</div>
+                <div class="code-name">#icon-stone</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-range"></use>
+                </svg>
+                <div class="name">range</div>
+                <div class="code-name">#icon-range</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rotate_h"></use>
+                </svg>
+                <div class="name">rotate_h</div>
+                <div class="code-name">#icon-rotate_h</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-height_g"></use>
+                </svg>
+                <div class="name">height_g</div>
+                <div class="code-name">#icon-height_g</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-scale_h"></use>
+                </svg>
+                <div class="name">scale_h</div>
+                <div class="code-name">#icon-scale_h</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-rb_y"></use>
                 </svg>
                 <div class="name">rb_y</div>

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1692587913655') format('woff2'),
-       url('iconfont.woff?t=1692587913655') format('woff'),
-       url('iconfont.ttf?t=1692587913655') format('truetype');
+  src: url('iconfont.woff2?t=1695894601293') format('woff2'),
+       url('iconfont.woff?t=1695894601293') format('woff'),
+       url('iconfont.ttf?t=1695894601293') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-stone:before {
+  content: "\e7b8";
+}
+
+.icon-range:before {
+  content: "\e7b9";
+}
+
+.icon-rotate_h:before {
+  content: "\e7b5";
+}
+
+.icon-height_g:before {
+  content: "\e7b6";
+}
+
+.icon-scale_h:before {
+  content: "\e7b7";
+}
+
 .icon-rb_y:before {
   content: "\e7b3";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,41 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "37553590",
+      "name": "stone",
+      "font_class": "stone",
+      "unicode": "e7b8",
+      "unicode_decimal": 59320
+    },
+    {
+      "icon_id": "37553589",
+      "name": "range",
+      "font_class": "range",
+      "unicode": "e7b9",
+      "unicode_decimal": 59321
+    },
+    {
+      "icon_id": "37553556",
+      "name": "rotate_h",
+      "font_class": "rotate_h",
+      "unicode": "e7b5",
+      "unicode_decimal": 59317
+    },
+    {
+      "icon_id": "37553555",
+      "name": "height_g",
+      "font_class": "height_g",
+      "unicode": "e7b6",
+      "unicode_decimal": 59318
+    },
+    {
+      "icon_id": "37553554",
+      "name": "scale_h",
+      "font_class": "scale_h",
+      "unicode": "e7b7",
+      "unicode_decimal": 59319
+    },
+    {
       "icon_id": "37011123",
       "name": "rb_y",
       "font_class": "rb_y",

src/components/vrange/index.vue

@@ -13,7 +13,6 @@
           v-bind="props"
           :modelValue="value"
           @update:modelValue="(val) => emit('update:value', val)"
-          :moveCallback="changeRange"
           :ctrl="false"
           :input="false"
           width="100%"
@@ -67,12 +66,8 @@ const changeRange = (sp: Pos, cp: Pos, info: { start: number; locusWidth: number
   justify-self: center;
 
   .fun-ctrl {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 24px;
+    margin: 0 10px;
     font-size: 24px;
-    transform: rotate(-90deg);
   }
   .range-content {
     display: flex;
@@ -88,9 +83,9 @@ const changeRange = (sp: Pos, cp: Pos, info: { start: number; locusWidth: number
     .num {
       position: absolute;
       color: #fff;
-      top: 0;
-      margin-top: -32px;
-      transform: translateY(-100%) translateX(calc(-50% - 10px)) rotate(90deg);
+      bottom: 0;
+      margin-top: 32px;
+      transform: translateY(-100%) translateX(calc(-50% - 10px));
       background: #2e2e2e;
       border-radius: 8px;
       padding: 10px;
@@ -102,10 +97,10 @@ const changeRange = (sp: Pos, cp: Pos, info: { start: number; locusWidth: number
         content: "";
         border: 8px solid transparent;
         position: absolute;
-        right: -15px;
-        border-left-color: #2e2e2e;
-        top: 50%;
-        transform: translateY(-50%);
+        bottom: -15px;
+        border-top-color: #2e2e2e;
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
   }
@@ -113,12 +108,14 @@ const changeRange = (sp: Pos, cp: Pos, info: { start: number; locusWidth: number
 
 .right-range {
   position: absolute;
-  padding: 0;
-  border-radius: 20px;
-  right: 10px;
-  top: 50%;
+  padding: 10px 20px;
+  border-radius: 30px;
+  left: 50%;
+  bottom: var(--boundMargin);
+  background-color: var(--editor-menu-back);
   z-index: 2;
-  transform: translateX(40%) rotate(-90deg);
+  margin-bottom: 74px;
+  transform: translateX(-50%);
 
   .range-content {
     align-items: center;

src/graphic/Renderer/Draw.js

@@ -190,20 +190,22 @@ export const help = {
 
     ctx.save();
     ctx.translate(center.x, center.y);
-    ctx.rotate((angle * Math.PI) / 180);
+    // ctx.rotate((angle * Math.PI) / 180);
     ctx.font = `${(style.fontSize || 10) * coordinate.ratio}px Microsoft YaHei`;
     const textCenter = help.getTextCenter(ctx, text);
-    const padding = style.padding;
-    help.roundRect(
-      ctx,
-      -textCenter.x - padding,
-      textCenter.y - padding,
-      textCenter.width + 2 * padding,
-      textCenter.height + 2 * padding,
-      textCenter.height / 2 + padding
-    );
     ctx.fillStyle = style.backColor;
-    ctx.fill();
+    if (!Settings.screenMode) {
+      const padding = style.padding;
+      help.roundRect(
+        ctx,
+        -textCenter.x - padding,
+        textCenter.y - padding,
+        textCenter.width + 2 * padding,
+        textCenter.height + 2 * padding,
+        textCenter.height / 2 + padding
+      );
+      ctx.fill();
+    }
     ctx.fillStyle = style.fillColor;
     ctx.fillText(text, -textCenter.x, -textCenter.y);
     ctx.restore();

src/views/graphic/geos/geo-teleport.vue

@@ -5,8 +5,12 @@
         <div class="menu-layout" v-if="!data.onClick">
           <slot :data="data" />
         </div>
-        <ui-icon :type="data.icon" class="icon" v-else-if="!data.desc" />
-        <p v-else>{{ data.desc }}</p>
+        <ui-icon
+          :type="data.icon"
+          class="icon"
+          v-else-if="data.desc === undefined || data.desc === null"
+        />
+        <p v-else class="desc">{{ data.desc }}</p>
       </template>
     </ActionMenus>
   </div>
@@ -64,7 +68,7 @@ defineProps<{ menus: Menu[]; active?: Menu }>();
     background: rgba(255, 255, 255, 0.1);
   }
 
-  p,
+  .desc,
   .icon {
     display: flex;
     align-items: center;

src/views/graphic/geos/roadEdge.vue

@@ -30,6 +30,8 @@ const clickHandlerFactory = (key) => {
   return () => {
     showChange.value = false;
     drawRef.value.uiControl.updateVectorForSelectUI(key);
+
+    drawRef.value.renderer.autoRedraw();
   };
 };
 
@@ -64,7 +66,7 @@ const lineTypeMenu = reactive([
   },
   {
     key: VectorStyle.RoadSide,
-    icon: "l_thin",
+    icon: "stone",
     text: "路缘线",
     onClick: () => {
       clickHandlerFactory(VectorStyle.RoadSide)();
@@ -96,7 +98,7 @@ const lineWidthMenu = reactive([
     key: "setRoadEdageWidth",
     icon: "l_thin",
     text: "宽度",
-    desc: 0,
+    desc: 20,
     onClick: () => {
       showChange.value = !showChange.value;
       childMenus.value = null;
@@ -119,15 +121,19 @@ const menus = ref([
 
 watchEffect(() => {
   if (style.value === VectorStyle.RoadSide) {
+    console.log(vector.value.roadSide);
     menus.value[1] = lineWidthMenu[2];
     lineWidthMenu[2].desc = vector.value.roadSide.width;
   } else {
-    showChange.value = false;
+    (menus.value[1] =
+      vector.value?.weight === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1]),
+      (showChange.value = false);
   }
 });
 watchEffect(() => {
   if (style.value === VectorStyle.RoadSide) {
     vector.value.setRoadSideWidth(lineWidthMenu[2].desc);
+    drawRef.value.renderer.autoRedraw();
   }
 });
 

src/views/scene/menus/menus.ts

@@ -135,27 +135,27 @@ export const menus: MenuRaw[] = [
     ],
   },
   {
-    icon: "standard",
+    icon: "range",
     text: "范围",
     key: "range",
     children: [
       {
-        icon: "standard",
+        icon: "height_g",
         text: "离地高度",
         key: "top",
       },
       {
-        icon: "standard",
+        icon: "scale_h",
         text: "水平缩放",
         key: "scale",
       },
       {
-        icon: "standard",
+        icon: "rotate_h",
         text: "水平旋转",
         key: "rotate",
       },
       {
-        icon: "standard",
+        icon: "recover",
         text: "恢复",
         key: "reset",
         single: true,