简述:拖动SVG图形会导致旋转和平移。
我正在尝试使用D3(v.4)作为Angular服务的一部分,在SVG组上实现拖动和缩放事件。
this.unitGroup = this.svg.append('g')
.attr('id', 'unitGroup')
.call(this.drag)
.call(this.zoom);
拖动操作可以使SVG图形发生移动。
drag = d3.drag()
.on('start', () => {
console.log('drag start');
this.setClickOrigin(d3.event);
})
.on('drag', (d, i, n) => {
const target = d3.select(n[i]).node() as any;
const m = target.getCTM();
const x = d3.event.x - this.clickOrigin.x;
const y = d3.event.y - this.clickOrigin.y;
this.setClickOrigin(d3.event);
this.translate(target, x, y);
});
当缩放时,SVG 会旋转。
zoom = d3.zoom()
.on('zoom', (d, i, n) => {
const target = d3.select(n[i]).node() as any;
const m = target.getCTM();
const b = target.getBBox();
const dir = (d3.event.sourceEvent.deltaY > 0) ? 1 : -1;
this.rotate(target, dir);
});
我的原始代码运行良好,但是将其集成到Angular中出现了一些问题。
当前的问题是,当您拖动
unitGroup
时,它会触发 zoom
事件和 drag
事件。期望的行为是:
- '单击并拖动'可以在x和y维度上平移小的深灰色框。
- '鼠标滚轮滚动'可以使小的深灰色框围绕其中心旋转。
这里是一个Plunker:https://embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/