0.1.2 • Published 6 years ago
javis v0.1.2
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'
}
});
- 数据格式介绍
- 成功回调中会传入一个对象,此对象包含了所有压缩包中的文件。对象的键名(key)即为文件名(包含后缀名),可以通过 f'example.png' 的方式取出编译后的文件
- returnOptions规定了相应后缀名的文件会以什么样的形式被返回,默认值为
TYPE_URL
,所有取值包括:
TYPE_TEXT
返回纯文本数据TYPE_URL
返回Bolb对象的ObjectURL,可以作为普通的资源链接在页面上使用TYPE_BLOB
返回Blob对象TYPE_RAW
直接返回解压之后的Uint8 Typedarray
数组TYPE_FILES
压缩文件中的文件夹默认对应此格式,仅可对文件夹指定此返回类型,返回的数据为一个包含文件夹内所有文件数据的对象。以上所有类型都可以对文件夹'folder'指定,当'folder'对应的类型不是
TYPE_FILES
时,文件夹内所有文件都会以该指定类型返回注意事项
- 压缩文件中最多只能有一层文件夹结构,推荐将所有资源文件都置于压缩文件根目录下
- 为保证正确性,请务必填写所用到文件类型的MIME TYPE,否则Blob对象将构建失败
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%处点的坐标
- 使用方式
- 由于SVG缩放的问题,建议先将SVG路径置于页面上绘制出所需的形状,再将相应参数填入构造函数中
- 建议使用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>
- precition代表预编译路径时的取值间隔,值越大则运动路径越接近折线,但不建议取小于2的值
- 参数介绍
- viewBox - SVG路径的默认视区,一般取SVG路径的BoundingBox的大小
- cssHeight与cssWdith - SVG路径在页面上的实际宽高,即通过CSS属性定义的宽高
- 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;
}