Question

我的网站上有一个可视化工具，我想制作它，以便显示的条形数量随着缩放级别的变化而变化（缩小的数量越多，条纹越多）

有没有办法检测缩放级别来做到这一点？

修改

这里是创建可视化工具的代码：

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
    function initVisualizer() {
        context = new AudioContext();
        analyser = context.createAnalyser();
        biquad = context.createBiquadFilter();
        gainNode = context.createGain();
        canvas = document.getElementById("visualizer");
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "#3f3f3f";


        analyser.smoothingTimeConstant = 0.8;
        biquad.frequency.value = 15000;
        gainNode.gain.value = 1;

        source = context.createMediaElementSource(Musique);
        source.connect(biquad);
        biquad.connect(gainNode);
        gainNode.connect(analyser);
        analyser.connect(context.destination);

        $("#frequencyNumber").html(biquad.frequency.value);
        $("#visualizerSensibilityNumber").html(analyser.smoothingTimeConstant);
        $("#gainNumber").html(gainNode.gain.value.toPrecision(3));

        framelooper()
    }

    function framelooper() {
        window.requestAnimationFrame(framelooper);
        fbcArray = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(fbcArray);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        bars = 50;
        for (i=0; i < bars; i++) {
            bar_x = i * 6;
            bar_width = 5;
            bar_height = -(fbcArray[i] / 1.75); //6 //1.75

            if (visualizerStyle == 1){
                //Simple
                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
                $("#visualizerStyleType").html("Simple");
            }
            else if (visualizerStyle == 2) {
                //Reflection
                ctx.fillRect(bar_x, canvas.height/2, bar_width, bar_height/2);
                ctx.fillRect(bar_x, canvas.height/2, bar_width, -bar_height/2);
                $("#visualizerStyleType").html("Reflection");
            }
            else {
                //Two-faced
                ctx.fillRect(0, bar_x, -bar_height, bar_width);
                ctx.fillRect(canvas.width, bar_x, bar_height, bar_width);
                $("#visualizerStyleType").html("Face to Face");
            }
        }
    }

我需要更改变量条，我知道我是怎么做的（Math.floor（50 / [缩放级别]）

编辑2：

我尝试了一些事情，但我遇到了一些问题：首先是，我有这个功能：

//scrolling information
var iScrollPos = 0;
var zoomLevel = 1;
$(function() {
    $(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();

        if (iCurScrollPos > iScrollPos && event.ctrlKey) {
            //Scrolling Down
            zoomLevel-=0.2;
            alert("Scrolled Down");
        }
        else {
            //Scrolling Up
            if (event.ctrlKey) {
                zoomLevel+=0.2;
                alert("Scrolled Up");
            }
        }
        iScrollPos = iCurScrollPos;
    }).triggerHandler("scroll");;
});

我想用来检测用户何时滚动，但这似乎无法正常工作

第二个问题是，我无法找到如何更改bar_width来显示所有条形码：

bars = Math.floor(50/zoomLevel);
for (i=0; i < bars; i++) {
    bar_width = (canvas.width/bars)/1.1;
    bar_x = i * 6;
    bar_height = -(fbcArray[i] / 1.75);

我知道我需要使用canvas.width / bars而不是6但我错过了什么

根据缩放级别

0 个答案: