@antv/g-plugin-annotation 插件在元素设置位置后,初始化位置不对。
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 230
- PR merge metrics
- No merged PRs in 30d
Description

``` vue
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()
})
```
Contributor guide
Research direction
Start with the provided Vue/TypeScript reproduction, especially PluginAnnotation, Canvas, and the rect2.setPosition(300, 100) call. Reproduce the initial placement problem and trace how the annotation plugin handles selectable elements after position is set. Done means the positioned element and its annotation appear in the correct initial location.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100