更新横向

src/extension/object/VerticalText.ts

@@ -18,8 +18,10 @@ export class VerticalText extends IText {
 
   constructor(text: string, options: any) {
     super(text, options)
-    this.textAlign = 'right'
-    this.direction = 'rtl'
+    // this.textAlign = 'right'
+    // this.direction = 'rtl'
+    this.textAlign = 'left'
+    this.direction = 'ltr'
     this.minHeight = options.width
 
     this.offsets = {
@@ -98,13 +100,13 @@ export class VerticalText extends IText {
       chars += this._textLines[lineIndex][i];
       drawWidth += this.__charBounds[lineIndex][i].width;
     }
-    const widthFactor = (drawWidth + localLineHeight / this.lineHeight);
+    const widthFactor = (localLineHeight / this.lineHeight);
     const heightFactor = drawWidth / 2 - charBox.height;
     drawLeft = drawLeft - widthFactor / 2;
     drawTop = drawTop + heightFactor;
     ctx.save();
     ctx.direction = 'ltr'
-    ctx.textAlign = 'start'
+    ctx.textAlign = 'left'
     const _boxHeight = charBox.height;
     const tx = drawLeft + drawWidth / 2 - _boxHeight / 8, ty = drawTop - _boxHeight / 8;
     ctx.translate(tx, ty);

src/views/Editor/CanvasRight/ElementStylePanel/TextboxStylePanel.vue

@@ -250,7 +250,7 @@ const { canvasObject, systemFonts, onlineFonts } = storeToRefs(mainStore)
 const { createPathElement } = useHandleCreate()
 const [ canvas ] = useCanvas()
 const handleElement = computed(() => canvasObject.value as Textbox | ArcText)
-const elementGrapheme = computed(() => handleElement.value.splitByGrapheme)
+const elementGrapheme = computed(() => handleElement.value.type !== ElementNames.ARCTEXT)
 const elementBackgrounColor = computed(() => {
   if (handleElement.value.type.toLowerCase() === ElementNames.ARCTEXT) {
     return handleElement.value.textBackgroundColor
@@ -474,9 +474,11 @@ const handleElementArrange = (status: boolean) => {
   delete options.type
   options.id = nanoid(10)
   const verticalText = new VerticalText(handleElement.value.text, options)
-  // const verticalText = new VerticalText('abc你好啊xyz', options)
+  canvas.remove(canvas.getActiveObject())
+  canvas.discardActiveObject()
   canvas.add(verticalText)
   templatesStore.modifedElement()
+  canvas.setActiveObject(verticalText)
   canvas.renderAll()
 }