clearTimeout при запуске события tool.mouseMove (PaperJs, VueJs) - PullRequest
Новая
       8

clearTimeout при запуске события tool.mouseMove (PaperJs, VueJs)

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

У меня есть экземпляр Paper с инструментом, который просто рисует путь на mouseMove и удаляет сегменты в начале этого пути, если количество сегментов больше 50. На этом этапе все отлично работает.это код: 

<template>
  <div>
    <canvas id="canvas" resize></canvas>
  </div>
</template>
<script>
import paper from 'paper';

export default {
  name: 'home',
  components: {
  },
  created() {
    paper.install(window);
  },
  mounted() {
    const canvas = this.$el.querySelector('#canvas');
    paper.setup(canvas);
    const path = new Path();
    path.strokeColor = '#f5bb56';
    path.strokeWidth = 2;
    this.tool = new Tool()
    this.tool.onMouseMove = event => {
      if (path.segments.length > 50) {
        path.removeSegment(0)
      };
      path.add(event.point);
      path.smooth({
        type: 'continuous'
      });
    };
    view.draw()
  },
};
</script>
<style lang="scss">
  #canvas {
    width: 100%;
    height: 100%;
  }
</style>

Проблема в том, что теперь я хочу начать удаление сегментов с этого пути с интервалом в 50 миллисекунд, но прекратить выполнение этого при добавлении нового сегмента.Я ищу что-то, чтобы установить переменную в timeout (() => {eraseFunction ()}), когда событие не запускается около двух секунд.

Я добавил clearTimeout, указывающий на переменнуюкоторый содержит его в начале события mouseMove и устанавливает его в конце, поэтому, если время ожидания истекло, я удаляю его при запуске mouseMove: 

export default {
  name: 'home',
  components: {
  },
  data() {
    return {
      tool: null,
      path: null,
      erase: null,
    }
  },
  created() {
    paper.install(window);
  },
  mounted() {
    const canvas = this.$el.querySelector('#canvas');
    paper.setup(canvas);
    this.path = new Path();
    this.path.strokeColor = '#f5bb56';
    this.path.strokeWidth = 2;
    this.tool = new Tool()
    this.tool.onMouseMove = event => {
      clearTimeout(this.erase);
      if (this.path.segments.length > 50) {
        this.path.removeSegment(0)
      };
      this.path.add(event.point);
      this.path.smooth({
        type: 'continuous'
      });
      this.erase = setTimeout(() => {
        this.eraseFunction()
      }, 2000);
    };
    view.draw()
  },
  methods: {
    eraseFunction() {
      setInterval(() => {
        this.path.removeSegment(0);
      }, 500);
    }
  }
};
</script>

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

Ответы [ 2 ]

1 голос
/ 20 марта 2019

ClearInterval нужен идентификатор интервала, который вы хотите очистить.Интервал ID задается вызовом setInterval.

Вы должны вернуть результат вызова setTimout в eraseFunction: 

eraseFunction() {
      return setInterval(() => {
        this.path.removeSegment(0);
      }, 500);
    }

И вам следует присвоить this.erase результат вызова eraseFunction вместоsetTimeout: 

setTimeout(() => {
        this.erase = this.eraseFunction()
      }, 2000);
1 голос
/ 20 марта 2019

Вам также необходимо очистить setInterval . Вы только очищаете setTimeout. setInterval все еще выполняет удаление ваших сегментов.

...