feat: text element width #277

src/editor/core/draw/Draw.ts

@@ -1593,6 +1593,10 @@ export class Draw {
           this.blockParticle.render(pageNo, element, x, y)
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
+          // 如果设置字宽需单独绘制
+          if (element.width) {
+            this._drawRichText(ctx)
+          }
         }
         // 下划线记录
         if (element.underline || element.control?.underline) {

src/editor/core/draw/particle/TextParticle.ts

@@ -67,6 +67,20 @@ export class TextParticle {
     ctx: CanvasRenderingContext2D,
     element: IElement
   ): TextMetrics {
+    // 优先使用自定义字宽设置
+    if (element.width) {
+      const textMetrics = ctx.measureText(element.value)
+      // TextMetrics是类无法解构
+      return {
+        width: element.width,
+        actualBoundingBoxAscent: textMetrics.actualBoundingBoxAscent,
+        actualBoundingBoxDescent: textMetrics.actualBoundingBoxDescent,
+        actualBoundingBoxLeft: textMetrics.actualBoundingBoxLeft,
+        actualBoundingBoxRight: textMetrics.actualBoundingBoxRight,
+        fontBoundingBoxAscent: textMetrics.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: textMetrics.fontBoundingBoxDescent
+      }
+    }
     const id = `${element.value}${ctx.font}`
     const cacheTextMetrics = this.cacheMeasureText.get(id)
     if (cacheTextMetrics) {