SVG.js - Как удалить ранее нарисованные элементы в Angular? - PullRequest
Новая
       17

SVG.js - Как удалить ранее нарисованные элементы в Angular?

0 голосов
/ 08 марта 2019

Я начинающий веб-разработчик с полным стеком.

Я помог создать приложение для игры в пинг-понг с использованием стека MEAN, SVG.js и сокетов.Ссылка на GitHub: https://github.com/ChristopherRoySchneider/pingpong

В приложении "Game-Caster" отвечает за генерацию "игровых событий" через сокеты, которые другие пользователи сайта могут видеть вживую.Эти игровые события могут состоять, среди других битов данных, из элемента круга SVG, нарисованного на элементе прямоугольника SVG (представляющего таблицу для пинг-понга), который показывает, где мяч для пинг-понга последний раз приземлился на счете.

Пользователь, просматривающий матч, может выбрать, какую игру из этого конкретного матча он или она хотели бы просмотреть из выпадающего меню.Затем приложение вытягивает все предыдущие шары на столе для выбранной игры.

У меня возникают проблемы с выяснением того, как удалять ранее нарисованные шары для пинг-понга со стола, когда пользователь меняет игру.В настоящее время все ранее нарисованные шары остаются на столе.

Я пытался использовать метод clear () SVG.js, чтобы очистить стол, когда пользователь выбирает другую игру.Это работает, но затем перерисовывает таблицу под тем местом, где раньше была старая таблица.

Вот ветвь, в которой я пытаюсь устранить эту ошибку: 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'
      });
    }
  }

AnyПомощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 10 марта 2019

Вам не нужно продолжать перерисовывать таблицу.Это статический размер, поэтому просто нарисуйте его один раз и оставьте.

Я бы сделал элемент группы 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'
    });
  }
}
...