fl-web-component 1.2.9 → 1.2.11

package/README.md

@@ -46,6 +46,10 @@ Vue.use(FlWebComponent)
 欢迎贡献代码和问题反馈。
 
 ## 更新日志
+- 1.2.11 2025-06-24
+1. 优化文字绘制
+- 1.2.10 2025-06-23
+1. 修改文字渲染逻辑
 - 1.2.9 2025-06-19
 1. fix: matrix 容错
 - 1.2.8 2025-06-19

package/dist/fl-web-component.common.js

@@ -29241,7 +29241,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b052779e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=9d23b864&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aa1018a6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=9d23b864&scoped=true
 var com_graphicsvue_type_template_id_9d23b864_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -57197,6 +57197,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,
@@ -59412,6 +59413,27 @@ var GEOM_TYPES = {
   geom_2d_ellipseArc: 57350,
   geom_2d_others: 57351
 };
+
+// 文本对齐枚举
+var 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
+};
 var drawObjMapInstance = {};
 /**
  * 处理 InstancedMesh 类型模型的核心方法
@@ -59479,6 +59501,16 @@ function handleInstancedMeshModel(modelGroup, instances, drawObjs, type, scene,
                 // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
                 meshMatrix.elements = item.matrix.val;
                 geomMatrix.elements = mesh.matrix.val;
+
+                // 处理文本居中对齐
+                var points = mesh.points,
+                  alignType = mesh.alignType;
+                if (isTextType(mesh.type)) {
+                  var positionMatrix = new Matrix4();
+                  var 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);
                 var copyMatrix = new Matrix4().copy(m4);
@@ -59567,7 +59599,7 @@ function instance_parser_drawModel(geom, instanceName, instanceCount, nColor, nO
   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 (geom.type == GEOM_TYPES.geom_2d_circle || geom.type == GEOM_TYPES.geom_2d_arc || geom.type == GEOM_TYPES.geom_2d_ellipse || geom.type == GEOM_TYPES.geom_2d_ellipseArc) {
@@ -59579,6 +59611,15 @@ function instance_parser_drawModel(geom, instanceName, instanceCount, nColor, nO
   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;
+}
+
 /**
  * 绘制曲线
  *
@@ -59638,7 +59679,8 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     customMaterial = geom.material,
     triangles = geom.triangles,
     points = geom.points,
-    normals = geom.normals;
+    normals = geom.normals,
+    prop = geom.prop;
   // 使用自定义几何体或创建新的缓冲几何体
   var geometry = customGeometry || new BufferGeometry();
 
@@ -59658,7 +59700,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     var normal = new Float32Array(normals);
     geometry.setAttribute('normal', new BufferAttribute(normal, 3));
   }
-  var color = geom.prop.color;
+  var color = prop.color;
   var material, mesh, colors, opacity;
   if (Array.isArray(color) && color.length) {
     colors = color;
@@ -59777,7 +59819,7 @@ function drawText(geom, instanceName, instanceCount) {
   var options = {
     font: font,
     // 字体格式
-    size: fontsize || 20,
+    size: fontsize / 2 || 20,
     // 字体大小 TODO
     height: 1,
     // 字体深度
@@ -59800,10 +59842,10 @@ function drawText(geom, instanceName, instanceCount) {
   }, instanceName, instanceCount);
 
   // 创建平移矩阵并应用
-
-  var matrix = new 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));
@@ -59815,12 +59857,90 @@ 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() {
+  var align = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : TextAlign.TextLeftBottom;
+  var geometry = arguments.length > 1 ? arguments[1] : undefined;
+  // 计算几何体包围盒用于对齐计算
+  geometry.computeBoundingBox();
+  var bbox = geometry.boundingBox;
+
+  // 初始化水平和垂直偏移量
+  var offsetX = 0;
+  var 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;
+  }
+
+  // 创建对齐变换矩阵
+  var alignMatrix = new Matrix4();
+  alignMatrix.identity().makeTranslation(offsetX, offsetY, 0);
+  return alignMatrix;
+}
+
 // CONCATENATED MODULE: ./src/utils/threejs/rain-shader.js
 
 var RainShader = {
@@ -62481,7 +62601,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var com_graphics = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b052779e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=1eba8e28&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aa1018a6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=1eba8e28&scoped=true
 var com_flcanvasvue_type_template_id_1eba8e28_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65680,7 +65800,7 @@ var com_flcanvas_component = normalizeComponent(
 )
 
 /* harmony default export */ var com_flcanvas = (com_flcanvas_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b052779e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aa1018a6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
 var per_controlvue_type_template_id_f547d5c6_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65788,7 +65908,7 @@ var per_control_component = normalizeComponent(
 )
 
 /* harmony default export */ var per_control = (per_control_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b052779e-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=0ec35ee4&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aa1018a6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=0ec35ee4&scoped=true
 var pidvue_type_template_id_0ec35ee4_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;