@antv/g-plugin-annotation 插件在元素设置位置后，初始化位置不对。

[ayedaren]

<template>
  <div>
    <div
      ref="container2"
      class="container2"
      style="width: 100vw; height: 100vh; background-color: #fff"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { Renderer as CanvasRenderer } from '@antv/g-canvas'
import { Canvas, Group, Rect, Text } from '@antv/g'
import { onMounted } from 'tdesign-vue-next/es/tree/adapt'
import { ref } from 'vue'
import { Plugin as PluginDragndrop } from '@antv/g-plugin-dragndrop'
import { Plugin as PluginAnnotation } from '@antv/g-plugin-annotation'
const container2 = ref<HTMLDivElement | null>(null)

const show = () => {
  if (!container2.value) return
  const renderer = new CanvasRenderer()

  const pluginAnnotation = new PluginAnnotation({
    enableDeleteTargetWithShortcuts: true,
    enableDeleteAnchorsWithShortcuts: true,
    enableAutoSwitchDrawingMode: true,
    enableDisplayMidAnchors: true,
    enableRotateAnchor: true,
    selectableStyle: {
      selectionFill: 'rgba(24,144,255,0.15)',
      selectionStroke: '#1890FF',
      selectionStrokeWidth: 2.5,
      anchorFill: '#1890FF',
      anchorStroke: '#1890FF',
      selectedAnchorSize: 10,
      selectedAnchorFill: 'red',
      selectedAnchorStroke: 'blue',
      selectedAnchorStrokeWidth: 10,
      selectedAnchorStrokeOpacity: 0.6,
      midAnchorFillOpacity: 0.6,
    },
  })

  // pluginAnnotation.setDrawingMode(false)
  renderer.registerPlugin(pluginAnnotation)
  const dropPlugin = new PluginDragndrop()
  renderer.registerPlugin(dropPlugin)
  const canvas = new Canvas({
    container: container2.value,
    renderer,
    width: container2.value.clientWidth,
    height: container2.value.clientHeight,
  })

  canvas.addEventListener('ready', () => {
    const rect1 = new Rect({
      style: {
        width: 88,
        height: 88,
        fill: 'blue',
      },
    })
    const rect2 = new Rect({
      style: {
        width: 88,
        height: 88,
        fill: 'green',
      },
    })

    rect2.setPosition(300, 100)
    rect1.style.selectable = true
    rect2.style.selectable = true
    const t1 = new Text({
      style: {
        text: '未设置position',
        fill: '#ffffff',
        fontSize: 12,
        textAlign: 'center',
        textBaseline: 'middle',
        fontWeight: 'bold',
      },
    })

    rect1.appendChild(t1)
    t1.setLocalPosition(44, 44)
    const t2 = new Text({
      style: {
        text: '设置position',
        fill: '#ffffff',
        fontSize: 12,
        textAlign: 'center',
        textBaseline: 'middle',
        fontWeight: 'bold',
      },
    })

    rect2.appendChild(t2)
    t2.setLocalPosition(44, 44)
    const g = new Group()
    g.appendChild(rect1)
    g.appendChild(rect2)
    canvas.appendChild(g)
    canvas.render()
  })
}
onMounted(() => {
  show()
})
</script>
<style lang="scss" scoped></style>