SVG.js - 如何在Angular中删除以前绘制的元素？

Question

我是初学者全栈Web开发人员。

我帮助使用MEAN堆栈，SVG.js和套接字构建了一个用于乒乓球的游戏强制应用程序。 GitHub链接：https://github.com/ChristopherRoySchneider/pingpong

在应用程序中，“游戏施法者”负责通过该站点的其他用户可以看到的套接字发出“游戏事件”。除了其他数据位之外，这些游戏事件可以包括在SVG矩形元素（表示乒乓球桌）上绘制的SVG圆形元素，其显示乒乓球最后落在得分上的位置。

观看比赛的用户可以通过下拉菜单选择他或她想要观看哪个特定比赛的比赛。该应用程序然后在桌面上绘制所选游戏的所有先前球。

当用户改变观看的游戏时，我无法弄清楚如何从桌面上删除以前绘制的乒乓球。目前，所有以前绘制的球都留在桌面上。

当用户选择不同的游戏时，我尝试使用SVG.js clear（）方法清除表格。这可以工作，但然后重新绘制旧表所在的表格下面的表格。

这是我试图压制这个bug的分支：https://github.com/ChristopherRoySchneider/pingpong/tree/table-redraw

在ngOnChanges中，我有以下代码：

ngOnChanges() {
  this.draw.clear();
  this.makeTable();
  this.game = this.match.games[this.gameIndex];
  this.drawPreviousBalls(this.game);
}

这是makeTable函数：

  makeTable() {
    this.draw = SVG('drawing').size(640, 356);
    this.table = this.draw.rect(640, 356).attr({
      'fill': '#022b6d',
      'stroke': '#fff',
      'stroke-width': 10
    });
    this.centerLine = this.draw.line([[0, 178], [640, 178]]).stroke({
      'color': '#fff',
      'width': 5
    })
    this.net = this.draw.line([[320, 0], [320, 356]]).stroke({
      'color': '#fff',
      'width': 5
    })
  }

还有我的drawPreviousBalls函数，它调用drawBall函数：

  drawPreviousBalls(game: Game) {
    for (let gameEvent of game.game_events) {
      if (gameEvent.x) {
        this.drawBall(gameEvent.x, gameEvent.y);
      }
    }
  }

  drawBall(x: number, y: number) {
    this.x = x;
    this.y = y;

    if(this.draw){
      this.ball = this.draw.circle(10).attr({
        cx: this.x,
        cy: this.y,
        fill: '#fff'
      });
    }
  }

任何帮助将不胜感激！

Answer 1

您无需重新绘制表格。这是一个静态大小，所以只需绘制一次然后离开它。

我要做的是制作一个SVG组元素（<g>），你可以保留所有的球元素。

this.balls = this.draw.group();

然后在重新绘制所有球的新位置之前，就这样做

this.balls.clear();

IE浏览器。

drawPreviousBalls(game: Game) {
  this.balls.clear();
  for (let gameEvent of game.game_events) {
    if (gameEvent.x) {
      this.drawBall(gameEvent.x, gameEvent.y);
    }
  }
}


drawBall(x: number, y: number) {
  this.x = x;
  this.y = y;

  if (this.draw) {
    this.ball = this.balls.circle(10).attr({
      cx: this.x,
      cy: this.y,
      fill: '#fff'
    });
  }
}