# javis

> rav core&components

Latest version **0.1.2** (published 2018-03-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install javis
pnpm add javis
yarn add javis
bun add javis
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-03-24 |
| First published | 2017-08-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nerowx |

## Links

- npm: https://www.npmjs.com/package/javis
- Repository: git@git.mail.netease.com:rav/javis
- npm.io page: https://npm.io/package/javis

## Recent versions

- 0.1.2 (latest) — 2018-03-24
- 0.1.1 — 2018-03-24
- 0.1.0 — 2018-03-12
- 0.0.9 — 2018-03-04
- 0.0.8 — 2018-03-04
- 0.0.7 — 2018-01-29
- 0.0.6 — 2018-01-24
- 0.0.5 — 2018-01-23
- 0.0.4 — 2017-08-30
- 0.0.3 — 2017-08-11
- 0.0.2 — 2017-08-10
- 0.0.1 — 2017-08-10

## README

## rav-core javis

### 1. loader - Zip文件加载器

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

```js
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路径上特定位置点的坐标，用于绘制沿特定路径运动的动画

```js
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)
    ```html
    <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

```js
    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

```js
    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

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

Dom源的CSS

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

---
_Source: https://npm.io/package/javis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._