文档章节

Html5 Canvas绘制大型波形数据

shengjuntu
 shengjuntu
发布于 2015/11/12 16:13
字数 435
阅读 1662
收藏 1

数据采用Float32Array保存。

http://www.ieyebrain.com:8080/upload/scroll.html

1 分页机制

用一个Pager的类来操作。

function Pager(buf, pageSize) {
        this.buf = buf;
        this.pageSize = pageSize;
        this.viewStart = -1;
        this.getView = function(pos) {
            if (this.viewStart >= 0 && pos >= this.viewStart && pos < this.viewStart + this.pageSize) {
                console.log('cache hit');
                return true;
            } else {
                var view = this.buf.subarray(pos, pos + this.pageSize);
                this.viewStart = pos;
                console.log('cache miss, get view again length is ' + view.length);
                return view;
            }
        };
    }

getView函数可以返回任何位置一个页面数据。内部维护一个cache,当移动不大的时候就不会切换View。

2 页面元素

html5种。用两个div元素,第一个为真实图形,第二个只是为了提供大范围的滚动条。
<div id="divWave" style="overflow-x:hidden">
    <canvas  id='waveform' height="100" width="32766" ></canvas>
</div>

<div id="divWaveOut" style="overflow-x:auto">
    <canvas  id='waveform-out' height="1" width="3276600" ></canvas>
</div>

3 将大范围的滚动条scroll事件转化为对视图的局部滚动或者换页操作。

waveOut.addEventListener('scroll', function(e) {
            e.preventDefault();
            var pos = this.scrollLeft;
            onGobalSeek(pos);
            return false;
        }, true
);

4 视图更新函数

function onGobalSeek(newPos) {
        var oldPos = pager.viewStart;
        var view = pager.getView(newPos);
        if ('boolean' == typeof view) { //页面内局部滚动
            var leftOld = waveObj.container.scrollLeft;
            var leftNew = newPos - oldPos;
            waveObj.container.scrollLeft = leftNew;
            console.log('just scroll it from ' + leftOld + ' -> ' + leftNew);
        } else { //换页
            waveObj.drawShape(view);
            waveObj.container.scrollLeft  = 0;
            console.log('redraw it');
        }
    }

5  绘图

function drawShape(buf){
                var ctx = this.ctx;
                this.waveform.width = this.waveform.width;

                //此为重要细节。firefox中,如果用clearRect不会立刻更新画面。
                ctx.beginPath();
                var y = ~~(buf[0]);
                ctx.moveTo(0, y);
                for (var i = 1; i < buf.length; i++) {
                    y = ~~(buf[i]);
                    ctx.lineTo(i, y);
                }
                ctx.stroke();
                ctx.closePath();
            }

另外:

http://www.ieyebrain.com:8080/audio/wavesurfer.js/

对wavesurfer.js的使用,和增加编辑功能。

 

© 著作权归作者所有

上一篇: 语音文件编辑
下一篇: servo-reading-2
shengjuntu
粉丝 14
博文 87
码字总数 17069
作品 0
上海
程序员
私信 提问
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
1K
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
450
0
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
2018/08/29
0
0
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
216
0
好程序员HTML5大前端常用开发工具大集合

HTML5作为当前最为流行的编程语言,广为适用。语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上。随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占...

好程序员IT
06/12
68
0

没有更多内容

加载失败,请刷新页面

加载更多

MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
9
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
7
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
5
0
4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

你好,我是彤哥,本篇是netty系列的第四篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使用纯纯的N...

彤哥读源码
今天
7
0
如何把握好面试的最后一问 ?

如何把握好面试的最后一问 ? 你有没有听过这句话 “ 你还有什么问题想问我的吗? ” 如何把握好面试的最后一问 ? 要积极稳妥,切莫减分、丢分、扣分。比如,你提问的问题很傻很天真,比如你提...

编程三分钟
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部