🤔使用interactjs绑定自定义绘制的rect事件无法触发
- Dominant language
- TypeScript
- Stars
- 1.7k
- Forks
- 220
- PR merge metrics
- No merged PRs in 30d
Description
### 🏷 Version
| Package | Version |
| -------------- | ------- |
| @antv/s2 | 2.0.0-next.26 |
| @antv/s2-react | |
| @antv/s2-vue | |
### Sheet Type
- [1] PivotSheet
- [1] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet
### 🖋 Description
### 🔗 Reproduce Link
基于官网[在单元格内绘制自定义图形demo](https://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart/#custom-g-shape) ,想使用interactjs将
蓝色圆形绑定draggable以移动图形的位置,代码如下
```
const rect = new Rect({
style: {
x: 300,
y: 200,
width: 100,
height: 100,
fill: '#1890FF',
fillOpacity: 0.8,
stroke: '#F04864',
strokeOpacity: 0.8,
lineWidth: 4,
radius: 100,
zIndex: 999,
},
}),
const canvas = s2.getCanvas()
canvas.appendChild(rect)
interact(rect, {
context: canvas.document as any
}).draggable({
startAxis: 'xy',
lockAxis: 'start',
listeners: {
start(event) {
console.log('start')
},
move(event) {
console.log('event')
}
}
})
```
### 😊 Expected Behavior
触发start和move事件
### 😅 Current Behavior
没有触发任何事件
Contributor guide
Research direction
Start with the official custom-shape-and-chart demo linked in the issue and reproduce the interaction using the shown Rect, canvas.appendChild, and interactjs setup. Trace why the draggable start and move listeners do not fire in the custom canvas context; done means both callbacks trigger when the blue shape is dragged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100