Question

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

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

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

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

当用户更改观看的游戏时，我很难弄清楚如何从桌上删除先前绘制的乒乓球。目前，所有以前绘制的球都保留在桌子上。

当用户选择其他游戏时，我尝试使用SVG.js clear（）方法清除表。可以，但是可以在以前的旧表下面重新绘制该表。

这是我尝试压缩此错误的分支： 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();

即。

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'
    });
  }
}

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

1 个答案: