antvis / antvis/G

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

Open
#1,957 0 comments 2 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
1.2k
Forks
230
PR merge metrics
No merged PRs in 30d

Description

![Image](https://github.com/user-attachments/assets/c308de54-e4b1-467e-b3c7-e1d45b7f54f9)
``` 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.