[置顶] 基于HT for Web矢量实现HTML5上传文件进度条

最新推荐文章于 2024-07-25 00:47:57 发布

吃货乙

最新推荐文章于 2024-07-25 00:47:57 发布

阅读量372

点赞数

分类专栏： HTML5</div> 拓扑图</div> Canvas</div> 矢量</div> 上传文件</div>

本文链接：https://blog.csdn.net/yixiaof/article/details/79010800

版权

本文介绍了如何使用HT for Web矢量技术实现HTML5文件上传进度条。通过创建矢量对象并设置背景、当前进度值和前景，利用数据绑定和自定义类型方法绘制进度条。同时，通过派发propertyChange事件确保进度条随文件上传进度更新，并添加文本显示当前进度值。文章还涉及如何处理圆角矩形和结合文件上传的服务器端实现。

摘要由CSDN通过智能技术生成

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条，矢量在《矢量Chart图表嵌入HTML5网络拓扑图的应用》一文中已经讲述了关于setCompType()方法的应用，今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条，我们先来看下效果图：

从效果图可以看到，向服务器上传了一个mp4文件，并在最下方显示当前上传进度。

那么接下来我们就来探讨下具体实现：

首先，我们来分析下进度条的结构：

1. 需要一个背景，background

2. 需要一个当前进度值，value

3. 需要一个前景，foreground，根据当前进度值，绘制前景，盖过背景

结构就这么简单，那么接下来就是具体的实现了，看码：

ht.Default.setImage('progress', {
    width : 150,
    height : 12,
    comps : [
        // 绘制背景
        {
            type : 'rect',
            rect : {x : 0, y : 0, width : 115, height : 12},
            background : {func : function(data) {return data.a('background');}}
        },
        // 绘制前景
        {
            rect : {x : 0, y : 0, width : 115, height : 12},
            type : function(g, rect, comp, data, view) {
                var width = rect.width, height = rect.height, value = data.getValue(), 
                    foreWidth = width / 100 * value;
                g.fillStyle = data.a('foreground');
                g.fillRect(0, 0, foreWidth, height);
            }
        }
    ]
});

我们定义了一个名字为progress的矢量对象，矢量对象由两部分组成，一个是背景，一个是前景。

绘制背景采用了数据绑定的方式