Рисование звука в виде звуковых полос на холсте не переписывает последний рисунок, если холст не установлен. - PullRequest
Новая
       57

Рисование звука в виде звуковых полос на холсте не переписывает последний рисунок, если холст не установлен.

1 голос
/ 27 апреля 2020

У меня есть следующее, в котором я получаю аудиоклип audioBuffer, а затем рисую круг звуковых полос для его визуализации: 

const { audioContext, analyser } = this.getAudioContext();
const source = audioContext.createBufferSource();
source.buffer = this.props.audioBuffer;
analyser.fftSize = 256;
source.connect(analyser).connect(audioContext.destination);

source.start();

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

// find the center of the window
let center_x = canvas.width / 2;
let center_y = canvas.height / 2;
let  radius = 150;

const frequency_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequency_array);

const bars = analyser.frequencyBinCount;
const bar_width = 2;

animationLooper();

function animationLooper(){
    //canvas.height = window.innerHeight;

    // find the center of the window
    center_x = canvas.width / 2;
    center_y = canvas.height / 2;
    radius = 50;

    analyser.getByteFrequencyData(frequency_array);
    for(let i = 0; i < bars; i++){

        //divide a circle into equal parts
        let rads = Math.PI * 2 / bars;

        const bar_height = frequency_array[i] / 2;

        // set coordinates
        let x = center_x + Math.cos(rads * i) * (radius);
        let y = center_y + Math.sin(rads * i) * (radius);
        const x_end = center_x + Math.cos(rads * i)*(radius + bar_height);
        const y_end = center_y + Math.sin(rads * i)*(radius + bar_height);

        //draw a bar
        drawBar(x, y, x_end, y_end, bar_width);

    }
    window.requestAnimationFrame(animationLooper);
}

function drawBar(x1, y1, x2, y2, width){
    ctx.strokeStyle = "#1890ff";
    ctx.lineWidth = width;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
}

HTML: 

<canvas id="canvas" width="400" height="400"  />

Это приводит к тому, что после завершения воспроизведения звука и завершения рисования. Он должен вернуться без синих линий.

wrongSoundBars

Однако, если я прокомментирую в строке 

canvas.height = window.innerHeight;

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

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

1 Ответ

1 голос
/ 01 мая 2020

Да, clearRect работает хорошо, если у вас нет других элементов для рисования на том же холсте для каждого кадра. Однако он не будет работать, если вы хотите удалить только один из элементов на холсте. 

ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);

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

Решение, которое я придумал, - сохранить все элементы в массиве. Затем нарисуйте массив с логическим тегом, который решает, следует ли рисовать для определенного элемента.

...