fl-web-component 1.2.10 → 1.2.11

package/package.json

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

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 };