Как сверстать круговую диаграмму с фоновым изображением?

#html #css #svg

Внимание! Это дубль вопроса с тостера! Автор не я, просто вопрос показался интересным:

Добрый день. Возникла необходимость сверстать круговую диаграмму с фоновым изображением,
что бы можно было редактировать процент заполнения. Пытался сделать с помощью SVG,
но скудные знания в этой области не позволили это реализовать. Причем нужно решение
без использования jQuery библиотек, можно на ванильном JS, либо с использованием VUE.

UPD: Полупрозрачная подложка под диаграммой просто отдельное изображение, которого
потенциально может и не быть. Интересует только создание диаграммы.

UPD 2: Я в курсе что нарушил Правила сообщества, не предоставив хоть попыток решения,
но я считаю, здесь вопрос не кода, а подхода к решению данного вопроса.


    

Ответы

Ответ 1

На картинку наложена маска из серого круга и белого сектора.

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



addEventListener('mousemove', e => {

  // процент заполнения
  let percent = Math.min(99.99, Math.max(0, (e.y-20)/(innerHeight-40)*100));
  
  // радиус сектора
  let r = 120;
  
  // угол второй точки сектора
  let angle = percent/50*Math.PI - Math.PI/2;
  
  // признак большой дуги
  let largeArc = percent > 50 ? 1 : 0;
  
  // аргументы команды ARC 
  let arc = [r, r, 0, largeArc, 1, Math.cos(angle)*r, Math.sin(angle)*r];

  // устанавливаем сектору
  path.setAttribute('d', `M0,${-r}A${arc}L0,0z`);
  
  text.innerHTML = percent.toFixed() + "%";
  
});





Ответ 2

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



let ctx = canvas.getContext('2d');
let image = new Image();
image.src = "https://picsum.photos/id/63/300/300";
image.onload = e => draw(ctx.fillStyle = ctx.createPattern(image, 'repeat'));
addEventListener('mousemove', draw);

function draw(e){
  let percent = Math.min(99.99, Math.max(0, (e.y||0-20)/(innerHeight-40)*100));
  let angle = percent/50*Math.PI - Math.PI/2;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  arc(0.5, 100, 0, Math.PI*2);
  arc(1.0, 120, -Math.PI/2, angle);
}

function arc(alpha, radius, startAngle, endAngle){
  ctx.globalAlpha = alpha
  ctx.beginPath();
  ctx.arc(canvas.width/2,canvas.height/2,radius,startAngle,endAngle);
  ctx.lineTo(canvas.width/2,canvas.height/2);
  ctx.fill();
}