Как сделать Custom Progessbar с 2 SVG? используя холст? - PullRequest
Новая
       22

Как сделать Custom Progessbar с 2 SVG? используя холст?

0 голосов
/ 16 ноября 2018

Я пытаюсь создать пользовательский прогесбар, который выглядит следующим образом:

enter image description here

Я хочу объединить его с таймером обратного отсчета, чтобы индикатор выполнения начинался полностью заполненным, и до конца таймера должен быть только фон.

Я создал эти два .svg

enter image description here enter image description here

Мне интересно, как мне создать этот индикатор прогресса.

Должен ли я использовать HTML-холст? Я могу нарисовать стрелку с этим кодом: 

  const ctx = this.arrow.getContext('2d');
  const img = new Image(200, 200);
  img.src = "../../../assets/positive-arrow-empty.svg";
  img.onload = () => {
    console.log('loaded', img);
    ctx.drawImage(img, 0, 0, 200, 200, );
  };

Но я не могу понять, как я могу отрезать изображение и оживить весь процесс.

Как я могу это сделать или есть лучший способ, чем использовать холст?

1 Ответ

0 голосов
/ 17 ноября 2018

Как и предполагали другие, здесь холст выглядит ненужным.Во всяком случае, это заставит все это работать хуже, так как вам нужно очистить весь холст и заново нарисовать оба изображения на каждом кадре.Вот решение, которое использует clip-path : 

const full = document.querySelector('.full')
full.style.clipPath = 'inset(0 0 0 0)'

let time = 5000
const frequency = 50
let clipPercentage = 0
const id = setInterval(() => {
  full.style.clipPath = `inset(${clipPercentage}% 0 0 0)`
  clipPercentage += 100 / (time / frequency)
  if ((time -= frequency) <= 0) {
    clearInterval(id)
  }
}, frequency)
.full, .empty {
  position: absolute;
}
.full {
  z-index: 1
}
<img class="full" src="https://i.stack.imgur.com/2V4sE.png"></img>
<img class="empty" src="https://i.stack.imgur.com/HJtCo.png"></img>

В этом примере используются PNG, но SVG должен работать так же.

...