fl-web-component 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.2.9",
+  "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 类型模型的核心方法
@@ -99,7 +118,19 @@ function handleInstancedMeshModel(
                 // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
                 meshMatrix.elements = item.matrix.val;
                 geomMatrix.elements = mesh.matrix.val;
+                
+                // 处理文本居中对齐
+                const { points, alignType } = mesh;
+                if(isTextType(mesh.type)){
+                  const positionMatrix = new THREE.Matrix4();
+                  
+                  const alignMatrix = createAlignedText(alignType, model.geometry)
+
+                  positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
+                  geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
+                }
                 m4.multiplyMatrices(meshMatrix, geomMatrix);
+
                 model.setMatrixAt(index, m4);
                 const copyMatrix = new THREE.Matrix4().copy(m4);
                 model.userData.copyMatrix = copyMatrix;
@@ -186,12 +217,7 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
   if (geom.type == GEOM_TYPES.geom_2d || geom.type == GEOM_TYPES.geom_2d_others) {
     model = draw2Dmodel(geom, instanceName, instanceCount); // TODO 该类型调试中
     // 处理二维文本类型
-  } else if (
-    geom.type == GEOM_TYPES.geom_2d_text ||
-    geom.type == GEOM_TYPES.geom_2d_mtext ||
-    geom.type == GEOM_TYPES.geom_3d_text ||
-    geom.type == GEOM_TYPES.geom_3d_mtext
-  ) {
+  } else if (isTextType(geom.type)) {
     model = drawText(geom, instanceName, instanceCount);
     // 处理各种曲线类型（圆形、圆弧、椭圆、椭圆弧）
   } else if (
@@ -208,6 +234,19 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
   return model;
 }
 
+/**
+ * 判断几何类型是否为文本类型
+ * @param {number} type - 几何类型枚举值，参考GEOM_TYPES中的定义
+ * @returns {boolean} 是否为文本类型（2D/3D 单行或多行文本）
+ */
+function isTextType(type){
+    return type == GEOM_TYPES.geom_2d_text ||
+    type == GEOM_TYPES.geom_2d_mtext ||
+    type == GEOM_TYPES.geom_3d_text ||
+    type == GEOM_TYPES.geom_3d_mtext
+}
+
+
 /**
  * 绘制曲线
  *
@@ -275,7 +314,7 @@ function drawCurves(geom, instanceName, instanceCount) {
  */
 function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   // 解构几何数据中的自定义几何体和材质
-  const { geometry: customGeometry, material: customMaterial, triangles, points, normals } = geom;
+  const { geometry: customGeometry, material: customMaterial, triangles, points, normals, prop } = geom;
   // 使用自定义几何体或创建新的缓冲几何体
   const geometry = customGeometry || new THREE.BufferGeometry();
 
@@ -295,7 +334,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     const normal = new Float32Array(normals);
     geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
   }
-  const { color } = geom.prop;
+  const { color } = prop;
   let material, mesh, colors, opacity;
   if (Array.isArray(color) && color.length) {
     colors = color;
@@ -437,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, // 斜角
@@ -447,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(
     {
@@ -460,10 +499,10 @@ function drawText(geom, instanceName, instanceCount) {
   );
 
   // 创建平移矩阵并应用
-
-  const matrix = new THREE.Matrix4();
-  matrix.identity().makeTranslation(points[0], points[1], points[2]);
-  mesh.applyMatrix4(matrix);
+  // const matrix = new THREE.Matrix4();
+  // matrix.identity().makeTranslation(points[0], points[1], points[2]);
+  // mesh.applyMatrix4(matrix);
+  // points && mesh.position.set(points[0], points[1], points[2]);
 
   // if (stageId == STAGE_MODEL_TYPE.PID) {
   //   mesh.translateX(-(fontsize / 2));
@@ -475,11 +514,88 @@ function drawText(geom, instanceName, instanceCount) {
   //   mesh.rotateY(rotate);
   // }
   // mesh.rotateX(-Math.PI / 2);
-  mesh.translateX(-(fontsize / 2.5));
-  mesh.translateY(-(fontsize / 2.5));
+  // mesh.translateX(-(fontsize / 2.5));
+  // mesh.translateY(-(fontsize / 2.5));
 
   mesh.userData.instanceName = instanceName;
   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 };