feat: 增加清楚当前蒙版数据的方法

CHANGELOG.md

@@ -1,14 +1,15 @@
-## 1.0.8 (2019-01-17)
+## 1.0.9 (2019-01-18)
 
 
 ### Bug Fixes
 
-* 修复 暂停-切换进度-播放 过程的一个已知BUG ([d87dd76](https://github.com/parksben/barrage/commit/d87dd76))
+* 修复 暂停-切换进度-播放 过程的一个已知BUG ([ee8b9f1](https://github.com/parksben/barrage/commit/ee8b9f1))
 * 暂停状态下切换进度画面不变的BUG ([4ceddef](https://github.com/parksben/barrage/commit/4ceddef))
 
 
 ### Features
 
+* 增加清楚当前蒙版数据的方法 ([96072a3](https://github.com/parksben/barrage/commit/96072a3))
 * 实现动画状态的可访问属性 ([e9c0b00](https://github.com/parksben/barrage/commit/e9c0b00))
 
 

README.md

@@ -257,6 +257,50 @@ barrage.goto(15000); // 跳转到第 15 秒
 - 'paused' - 已暂停
 - 'playing' - 播放中
 
+## 其他接口&属性
+
+### barrage.setMask(mask)
+
+> **描述**
+
+用于设置蒙版图像。蒙版图像的概念见下文 [**蒙版弹幕**](#蒙版弹幕)
+
+> **参数**
+
+mask - 蒙版图像的 url 或 [ImageData](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData)
+
+> **用例**
+
+```js
+barrage.setMask('mask.png'); // 通过图片 url 设置蒙版图像
+
+barrage.setMask(imageData); // 直接设置 ImageData 类型的数据
+```
+
+### barrage.clearMask()
+
+> **描述**
+
+用于清空当前的蒙版图像。清空后若不再重新设置蒙版图像，则动画将不再具有蒙版效果
+
+> **用例**
+
+```js
+barrage.clearMask();
+```
+
+### barrage.canvas
+
+> **含义**
+
+渲染弹幕的 canvas 画布
+
+### barrage.ctx
+
+> **含义**
+
+画布的上下文，相当于 `barrage.canvas.getContext('2d')`
+
 ## 蒙版弹幕
 
 Barrage 组件提供了实现 蒙版弹幕 效果的可能。基于本组件实现的 demo 效果如下：

index.js

@@ -5,7 +5,7 @@ import {
 } from './utils';
 
 // 支持通过 barrage.setConfig() 接口修改的配置项
-const defaultConfig = {
+const DEFAULT_CONFIG = {
   duration: -1, // -1 表示不循环播放
   speed: 100,
   fontSize: 24,
@@ -15,6 +15,12 @@ const defaultConfig = {
   defaultColor: '#fff',
 };
 
+// 蒙版信息
+const GLOBAL_MASK = {
+  type: null, // 蒙版类型：'url' 'ImageData'
+  mask: null, // 蒙版数据：ImageData
+};
+
 /**
  * 弹幕组件 Barrage
  * @param {string/element} container 弹幕的挂载点
@@ -73,7 +79,7 @@ export default class Barrage {
 
     // 全局参数设置
     this.setConfig({
-      ...defaultConfig,
+      ...DEFAULT_CONFIG,
       ...config,
     });
 
@@ -85,23 +91,32 @@ export default class Barrage {
     this.setData(data);
   }
 
-  setMask(mask) {
-    if (typeof mask === 'string') {
-      this.maskType = 'image';
-      loadImage(mask).then(img => {
-        this.mask = img;
+  setMask(input) {
+    if (typeof input === 'string') {
+      GLOBAL_MASK.type = 'url';
+      loadImage(input).then(img => {
+        GLOBAL_MASK.data = img;
       });
-    } else if (Object.prototype.toString.apply(mask) === '[object ImageData]') {
-      this.maskType = 'data';
-      this.mask = mask;
+    } else if (
+      Object.prototype.toString.apply(input) === '[object ImageData]'
+    ) {
+      GLOBAL_MASK.type = 'ImageData';
+      GLOBAL_MASK.data = input;
+    } else {
+      GLOBAL_MASK.type = null;
+      GLOBAL_MASK.data = null;
     }
   }
 
+  clearMask() {
+    this.setMask();
+  }
+
   setConfig(config) {
     if (!this.config) this.config = {};
 
     for (let [prop, value] of Object.entries(config)) {
-      if (defaultConfig[prop]) this.config[prop] = value;
+      if (DEFAULT_CONFIG[prop]) this.config[prop] = value;
     }
   }
 
@@ -258,12 +273,12 @@ export default class Barrage {
       this.beforeRender(this.ctx, this.progress, this.animState);
 
     this.ctx.save();
-    if (this.mask) {
-      if (this.maskType === 'data') {
-        this.ctx.putImageData(this.mask, 0, 0);
-      } else if (this.maskType === 'image') {
+    if (GLOBAL_MASK.data) {
+      if (GLOBAL_MASK.type === 'ImageData') {
+        this.ctx.putImageData(GLOBAL_MASK.data, 0, 0);
+      } else if (GLOBAL_MASK.type === 'url') {
         this.ctx.drawImage(
-          this.mask,
+          GLOBAL_MASK.data,
           0,
           0,
           this.canvas.width,
@@ -287,7 +302,7 @@ export default class Barrage {
     }
 
     // 绘制数据
-    const context = this.mask ? this.anotherContext : this.ctx;
+    const context = GLOBAL_MASK.data ? this.anotherContext : this.ctx;
     context.globalAlpha = this.config.opacity;
     context.shadowColor = 'rgba(0, 0, 0, 1)';
     context.shadowOffsetX = 0;
@@ -300,7 +315,7 @@ export default class Barrage {
       context.fillText(d.text, d.left - translateX * d.speedRatio, d.top);
     });
 
-    if (this.mask) {
+    if (GLOBAL_MASK.data) {
       this.ctx.globalCompositeOperation = 'source-in';
       this.ctx.drawImage(
         this.anotherCanvas,

package.json

@@ -4,7 +4,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
   "name": "barrage-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Best and lightest barrage component for web UI.",
   "main": "index.js",
   "repository": {