javis

rav-core javis

1. loader - Zip文件加载器

将资源文件打成单个压缩包，一次性加载 - 解压 - 编译的加载器

Javis.loader.initLoad(['https://yanxuan.nosdn.127.net/1500963393479RPWWSI419.flv'],//zip文件路径
{//加载配置
    loadOptions: {//网络请求相关回调
        success: function(f) {//成功回调
            //f为 #以文件名为key# #以编译后数据为value# 的对象(Object) 
            console.log(f);
        },
        error: function(e) {//失败回调
            // alert(e);
        },
        progress: function(p) {//加载进度回调  0<=p<=1
            console.log(p)
        }
    },
    returnOptions:{//编译数据格式
        'folder': Javis.loader.TYPE_FILES,
        'mp3': Javis.loader.TYPE_URL,
    },
    mimeOptions:{//文件后缀名对应的MIME TYPE字符串
        'jpg':'image/jpeg'
    }
});

• 数据格式介绍

1. 成功回调中会传入一个对象，此对象包含了所有压缩包中的文件。对象的键名(key)即为文件名(包含后缀名)，可以通过 f['example.png'] 的方式取出编译后的文件
2. returnOptions规定了相应后缀名的文件会以什么样的形式被返回，默认值为TYPE_URL，所有取值包括：

• TYPE_TEXT 返回纯文本数据
• TYPE_URL 返回Bolb对象的ObjectURL，可以作为普通的资源链接在页面上使用
• TYPE_BLOB 返回Blob对象
• TYPE_RAW 直接返回解压之后的Uint8 Typedarray数组
• TYPE_FILES 压缩文件中的文件夹默认对应此格式，仅可对文件夹指定此返回类型，返回的数据为一个包含文件夹内所有文件数据的对象。

以上所有类型都可以对文件夹'folder'指定，当'folder'对应的类型不是 TYPE_FILES 时，文件夹内所有文件都会以该指定类型返回

• 注意事项

1. 压缩文件中最多只能有一层文件夹结构，推荐将所有资源文件都置于压缩文件根目录下
2. 为保证正确性，请务必填写所用到文件类型的MIME TYPE，否则Blob对象将构建失败
3. Android中音频文件无法使用TYPE_URL的格式播放，只能获取Blob对象，再通过FileReader读取成DataURL(base64格式)进行播放

2.svgPath - SVG路径追踪

获取SVG路径上特定位置点的坐标，用于绘制沿特定路径运动的动画

var path = new Javis.svgPath({
    path:pathElement,//Path 元素，此属性将覆盖下面的pathStr
    pathStr: 'M49.882,26.804c0,0,22.583-44.563,45.438-16.603C118.177,38.161,49.882,100,49.882,100s-67.536-59.482-45.44-89.799C26.538-20.117,49.882,26.804,49.882,26.804z',
    //SVG路径字符串，在path属性未定义时直接生成path元素，会被path属性覆盖
    viewBox: [0, 0, 100, 100],//SVG路径的默认视区
    cssWidth: document.documentElement.clientWidth,//SVG路径实际使用于页面上的宽度范围
    cssHeight: document.documentElement.clientWidth / 2,//SVG路径实际使用于页面上的高度范围
    precition: 2//预编译时的取值精度
})
path.getPositionAt(0.7) //获取路径70%处点的坐标

• 使用方式

1. 由于SVG缩放的问题，建议先将SVG路径置于页面上绘制出所需的形状，再将相应参数填入构造函数中
2. 建议使用SVG模板绘制路径，并通过CSS定义SVG元素的宽和高(对应cssWidth和cssHeight)

   <svg viewBox="0 0 100 100" preserveAspectRatio="none">
       <path stroke="#000000" fill="transparent"
       d="M49.882,26.804c0,0,22.583-44.563,45.438-16.603C118.177,38.161,49.882,100,49.882,100s-67.536-59.482-45.44-89.799C26.538-20.117,49.882,26.804,49.882,26.804z">
       </path>
   </svg>

3. precition代表预编译路径时的取值间隔，值越大则运动路径越接近折线，但不建议取小于2的值

• 参数介绍

1. viewBox - SVG路径的默认视区，一般取SVG路径的BoundingBox的大小
2. cssHeight与cssWdith - SVG路径在页面上的实际宽高，即通过CSS属性定义的宽高
3. precition - 在路径编译时，会从路径起点开始，每隔一段距离(即precition的值)取一个点，作为锚点储存在内存中，因此不建议此值过小

3.bgm - 背景音乐组件

• API

    let bgm = new Javis.bgm('./assets/peiyin.mp3', {
        autoPlay: false, 
        fill: 'rgba(0, 0, 0, 0.7)', //图标颜色
        spin: true //旋转
    });
 
    bgm.init();

4.avc - a-simple-video-controller组件

• API

    let avc = new Javis.avc([
        "http://nos.netease.com/masteruser1/1480474828419B835MFHL7.mp4",
        "http://nos.netease.com/masteruser1/1480474856354IWC5EVO3Y.ogv",
        "http://nos.netease.com/masteruser1/1480474877352EU2GK7SEY.WebM"
    ], {
        canvas: true //强制开启canvas绘制视频帧，可以绕过x5同层播放
    })
 
    avc.init();
    avc.play();
    avc.pause();

5.poster - 前端生成海报组件

• features 基于html2canvas 1.0.0-alpha9封装，源码有修改
• API

    Javis.poster.draw({
        orgin: '.J-poster', //Dom源，default:body
        target: '.J-outer', //输出的img className
        success: function(base64Url){
            //成功回调
            console.log(base64Url);
        }
    });

Dom源的CSS

.g-poster{
    width: 7.5rem;
    height: 12.04rem;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}