fl-web-component 1.2.10 → 1.2.12

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-9d23b864],#konva-container[data-v-1eba8e28]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-1eba8e28]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-9d23b864],#konva-container[data-v-4458f11e]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4458f11e]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

package/packages/components/com-flcanvas/index.vue

@@ -253,7 +253,7 @@ var preTarget = [];
         //缩放视口
         let scale = 1;
         const boundingRect = konvaLayer.getClientRect();
-        let ratio = Number((this.$refs.svgDraw.clientWidth / boundingRect.width).toFixed(1));
+        let ratio = Number((this.$refs.svgDraw?.clientWidth / boundingRect.width).toFixed(1));
         if (ratio > 2) {
           scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
           scale = scale < 2 ? 2 : scale;
@@ -265,7 +265,7 @@ var preTarget = [];
         const boundingScale = konvaLayer.getClientRect();
         //平移视口
         const x =
-          this.$refs.svgDraw.clientWidth / 2 -
+          this.$refs.svgDraw?.clientWidth / 2 -
           (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
         const y =
           this.$refs.svgDraw.clientHeight / 2 -

package/src/utils/flgltf-parser.js

@@ -122,6 +122,7 @@ function parseData(input) {
           type: primitiveData.geomType,
           text: primitiveData.geomText,
           points: primitiveData.position,
+          alignType: primitiveData.alignType,
           normals: primitiveData.normal,
           triangles: primitiveData.indices || [],
           max: primitiveData.max,

package/src/utils/instance-parser.js

@@ -19,6 +19,25 @@ const GEOM_TYPES = {
   geom_2d_others: 57351,
 };
 
+// 文本对齐枚举
+const TextAlign = {
+  TextLeftBottom: 0,     // 左下角
+  TextLeftMiddle: 1,
+  TextLeftTop: 2,
+  TextCenterBottom: 3,
+  TextCenterMiddle: 4,
+  TextCenterTop: 5,
+  TextRightBottom: 6,
+  TextRightMiddle: 7,
+  TextRightTop: 8,      // 右上角
+  TextLeft: 9,
+  TextCenter: 10,
+  TextRight: 11,
+  TextAligned: 12,
+  TextMiddle: 13,
+  TextFit: 14
+};
+
 let drawObjMapInstance = {};
 /**
  * 处理 InstancedMesh 类型模型的核心方法
@@ -100,13 +119,15 @@ function handleInstancedMeshModel(
                 meshMatrix.elements = item.matrix.val;
                 geomMatrix.elements = mesh.matrix.val;
                 
-                const { points } = mesh;
+                // 处理文本居中对齐
+                const { points, alignType } = mesh;
                 if(isTextType(mesh.type)){
                   const positionMatrix = new THREE.Matrix4();
-                  const alignMatrix = new THREE.Matrix4();
+                  
+                  const alignMatrix = createAlignedText(alignType, model.geometry)
+
                   positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
-                  alignMatrix.identity().makeTranslation(-(mesh.prop.fontsize / 2.5), -(mesh.prop.fontsize / 2.5), 0);
-                  geomMatrix.multiply(positionMatrix).multiply(alignMatrix);
+                  geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
                 }
                 m4.multiplyMatrices(meshMatrix, geomMatrix);
 
@@ -455,7 +476,7 @@ function drawText(geom, instanceName, instanceCount) {
   var font = loader.parse(helvetikerFont);
   var options = {
     font: font, // 字体格式
-    size: fontsize || 20, // 字体大小 TODO
+    size: fontsize / 2 || 20, // 字体大小 TODO
     height: 1, // 字体深度
     curveSegments: 11, // 曲线控制点数
     bevelEnabled: true, // 斜角
@@ -465,7 +486,7 @@ function drawText(geom, instanceName, instanceCount) {
     bevelSegments: 1, // 斜角段数
   };
 
-  var geometry = new TextGeometry(`${text}`, options);
+  let geometry = new TextGeometry(`${text}`, options);
 
   const mesh = draw3Dmodel(
     {
@@ -500,4 +521,81 @@ function drawText(geom, instanceName, instanceCount) {
   return mesh;
 }
 
+/**
+ * 
+ * @param {number} align 对齐方式
+ * @param {object} geometry 几何体
+ * @returns
+ */
+function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
+  // 计算几何体包围盒用于对齐计算
+  geometry.computeBoundingBox();
+  const bbox = geometry.boundingBox;
+  
+  // 初始化水平和垂直偏移量
+  let offsetX = 0;
+  let offsetY = 0;
+  
+  // 水平对齐处理（X轴方向）
+  switch(align) {
+    // 左对齐系列（文本左边界对齐原点）
+    case TextAlign.TextLeft:
+    case TextAlign.TextLeftBottom:
+    case TextAlign.TextLeftMiddle:
+    case TextAlign.TextLeftTop:
+      offsetX = -bbox.min.x; // 左边界对齐
+      break;
+      
+    // 居中对齐系列（文本中心对齐原点）  
+    case TextAlign.TextCenter:
+    case TextAlign.TextCenterBottom:
+    case TextAlign.TextCenterMiddle:
+    case TextAlign.TextCenterTop:
+      offsetX = -(bbox.min.x + bbox.max.x) / 2; // 水平居中
+      break;
+      
+    // 右对齐系列（文本右边界对齐原点）
+    case TextAlign.TextRight:
+    case TextAlign.TextRightBottom:
+    case TextAlign.TextRightMiddle:
+    case TextAlign.TextRightTop:
+      offsetX = -bbox.max.x; // 右边界对齐
+      break;
+  }
+  
+  // 垂直对齐处理（Y轴方向）
+  switch(align) {
+    // 垂直居中系列
+    case TextAlign.TextMiddle:
+    case TextAlign.TextLeftMiddle:
+    case TextAlign.TextCenterMiddle:
+    case TextAlign.TextRightMiddle:
+      offsetY = -(bbox.min.y + bbox.max.y) / 2; // 垂直居中
+      break;
+      
+    // 顶部对齐系列  
+    case TextAlign.TextTop:
+    case TextAlign.TextLeftTop:
+    case TextAlign.TextCenterTop:
+    case TextAlign.TextRightTop:
+      offsetY = -bbox.max.y; // 顶部对齐
+      break;
+      
+    // 底部对齐系列
+    case TextAlign.TextBottom:
+    case TextAlign.TextLeftBottom:
+    case TextAlign.TextCenterBottom:
+    case TextAlign.TextRightBottom:
+      offsetY = -bbox.min.y; // 底部对齐
+      break;
+  }
+  
+  // 创建对齐变换矩阵
+  const alignMatrix = new THREE.Matrix4();
+  alignMatrix.identity().makeTranslation(offsetX, offsetY, 0)
+  
+  return alignMatrix;
+} 
+
+
 export { handleInstancedMeshModel };