{"version":3,"sources":["../../src/component/AudioAnalyser/RenderCanvas.js"],"names":["React","RenderCanvas","renderCurve","props","height","width","RenderCanvasClass","animationId","window","requestAnimationFrame","bufferLength","analyser","fftSize","dataArray","Uint8Array","getByteTimeDomainData","configCanvas","sliceWidth","Number","x","canvasCtx","moveTo","i","v","y","lineTo","stroke","initCanvas","cancelAnimationFrame","backgroundColor","strokeColor","canvas","canvasRef","current","getContext","clearRect","fillStyle","fillRect","lineWidth","strokeStyle","beginPath","Target","createRef"],"mappings":"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","file":"RenderCanvas.js","sourcesContent":["/**\r\n * Created by j_bleach on 2018/8/6.\r\n */\r\nimport React from \"react\";\r\n\r\nconst RenderCanvas = Target => {\r\n    return class RenderCanvasClass extends Target {\r\n        static canvasRef = React.createRef(); // react ref\r\n        static canvasCtx = null; // canvas 涓婁笅鏂嘰r\n        static animationId = null;\r\n\r\n        componentDidMount() {\r\n            this.initCanvas();\r\n        }\r\n\r\n        componentWillUnmount() {\r\n            window.cancelAnimationFrame(RenderCanvasClass.animationId); //缁勪欢閿€姣佸墠锛屾敞閿€瀹氭椂鍔ㄧ敾\r\n        }\r\n\r\n        /**\r\n         * @author j_bleach 2018/8/18\r\n         * @describe canvas 閰嶇疆\r\n         */\r\n        configCanvas() {\r\n            const {height, width, backgroundColor, strokeColor} = this.props;\r\n            const canvas = RenderCanvasClass.canvasRef.current;\r\n            RenderCanvasClass.canvasCtx = canvas.getContext(\"2d\");\r\n            RenderCanvasClass.canvasCtx.clearRect(0, 0, width, height);\r\n            RenderCanvasClass.canvasCtx.fillStyle = backgroundColor;\r\n            RenderCanvasClass.canvasCtx.fillRect(0, 0, width, height);\r\n            RenderCanvasClass.canvasCtx.lineWidth = 2;\r\n            RenderCanvasClass.canvasCtx.strokeStyle = strokeColor;\r\n            RenderCanvasClass.canvasCtx.beginPath();\r\n        }\r\n\r\n        /**\r\n         * @author j_bleach 2018/8/18\r\n         * @describe 鐢诲竷鍒濆鍖�,鍋滄鍔ㄧ敾\r\n         */\r\n        initCanvas() {\r\n            window.cancelAnimationFrame(RenderCanvasClass.animationId);\r\n            const {height, width} = this.props;\r\n            this.configCanvas();\r\n            RenderCanvasClass.canvasCtx.moveTo(0, height / 2);\r\n            RenderCanvasClass.canvasCtx.lineTo(width, height / 2);\r\n            RenderCanvasClass.canvasCtx.stroke();\r\n        }\r\n\r\n        /**\r\n         * @author j_bleach 2018/8/18\r\n         * @describe 鍔ㄦ€佺粯鍒堕煶棰戞洸绾縗r\n         */\r\n        renderCurve = () => {\r\n            const {height, width} = this.props;\r\n            RenderCanvasClass.animationId = window.requestAnimationFrame(this.renderCurve); // 瀹氭椂鍔ㄧ敾\r\n            const bufferLength = this.analyser.fftSize; // 榛樿涓�2048\r\n            const dataArray = new Uint8Array(bufferLength);\r\n            // console.log(\"data\",dataArray)\r\n            this.analyser.getByteTimeDomainData(dataArray);// 灏嗛煶棰戜俊鎭瓨鍌ㄥ湪闀垮害涓�2048锛堥粯璁わ級鐨勭被鍨嬫暟缁勶紙dataArray锛塡r\n            this.configCanvas();\r\n            const sliceWidth = Number(width) / bufferLength;\r\n            let x = 0;\r\n            RenderCanvasClass.canvasCtx.moveTo(x, height / 2);\r\n            for (let i = 0; i < bufferLength; i++) {\r\n                const v = dataArray[i] / 128.0;\r\n                const y = v * height / 2;\r\n            RenderCanvasClass.canvasCtx[\"lineTo\"](x, y);\r\n                x += sliceWidth;\r\n            }\r\n            RenderCanvasClass.canvasCtx.lineTo(width, height / 2);\r\n            RenderCanvasClass.canvasCtx.stroke();\r\n        }\r\n\r\n        /**\r\n         * @author j_bleach 2018/8/18\r\n         * @describe 鍒濆鍖栨覆鏌揷anvas鑺傜偣\r\n         */\r\n        renderCanvas() {\r\n            const {height, width} = this.props;\r\n            return <canvas ref={RenderCanvasClass.canvasRef} height={height} width={width}\r\n                           style={{width: width, height: height}}/>\r\n        }\r\n    }\r\n}\r\nexport default RenderCanvas;"]}