`元素就好：\n\n```html\n
\n```\n\n然后，实例化一个`ABarrage`对象，同时传入`div`元素：\n\n```js\nnew ABarrage(\n '#danmu',\n config\n)\n```\n\n其中，`config`对象支持如下属性（全部都是可选的，如下值为默认值）：\n\n```js\nconfig = {\n engine: 'css3', // 渲染引擎 canvas 或 css3 可选\n zoom: 1, // 文字缩放比\n proxyObject: null, // 事件代理触发对象\n usePointerEvents: true, // 屏蔽弹幕画布的点击事件\n maxTrack: 4, // 最大轨道数\n fontSize: 20, // 文字大小，单位为px\n fontColor: '#fff', // 文字颜色\n duration: 10000, // 弹幕留存时间\n trackHeight: 20 * 1.5, // 轨道高度，默认为默认文字的1.5倍\n wrapper: document.querySelector('#container') // wrapper 用于弹幕交互的事件代理，如果需要交互，则必须传入\n}\n```\n\n### 通用步骤\n\n然后，可以通过`add()`方法添加弹幕：\n```js\n// 添加滚动弹幕\ninstance.add(danmu, 'scroll')\n\n// 添加固定在顶部的弹幕\ninstance.add(danmu, 'fixed-top')\n\n// 添加固定在底部的弹幕\ninstance.add(danmu, 'fixed-bottom')\n```\n\n其中，第一个参数是一个`RawBarrageObject`对象，它的类型是这样的：\n\n```js\nRawBarrageObject {\n text: string // 文本 \n color?: string // 颜色，可选\n size?: number // 字体大小，可选\n}\n```\n\n第二个参数也是可选的，默认为`scroll`，即滚动弹幕。顶部弹幕和底部弹幕分别为：`fixed-top`、`fixed-bottom`。\n\n## 📅 事件机制\n\n首先，为了弹幕的正常显示，你必须拥有这样的层级：\n```\n------用户视觉-------\n 👇 👇 👇 👇\n--------弹幕--------\n-------播放器-------\n```\n\n以上层级的HTML结构一般是这样的：\n```html\n
\n
\n
\n
\n```\n\n这样会造成一个问题，因为弹幕元素和播放器元素是兄弟元素结点，所以，当点击弹幕时，事件并无法传达到播放器上。\n\n为了解决事件被阻挡的问题，这里主要使用了两种方法：\n1. `pointer-events:none`\n2. 事件代理\n\n### `usePointerEvent`\n配置选项中的`usePointerEvent`默认为`true`，也就是默认状态下会为画布元素添加该CSS属性。这样的话画布元素就不会成为鼠标事件的`target`，那么鼠标事件就会从下一层的元素开始触发。\n\n但是这个属性有兼容性问题，对于IE仅支持IE11+的浏览器，其余浏览器的最新版本基本已支持。\n\n综上，所以有了事件代理机制。\n\n### 事件代理\n`ABarrage`类是继承自`EventEmitter`的，因此它也是一个事件中心，拥有`$on`、`$once`、`$emit`、`$off`等方法。\n\n对于`click`、`dblclick`、`mousedown`、`mousemove`、`mouseout`、`mouseover`、`mouseup`这几个鼠标事件，当画布触发这些事件时，会调用`$emit`同步触发通过`$on`绑定的事件处理器。\n\n除此之外，你也可以添加自定义事件。\n\n## 🔎 API\n### add(barrage[, type])\n其中，`barrage`是一个`RawBarrageObject`对象，它的结构是这样的：\n```js\n{\n text: string,\n color?: string,\n size?: number\n}\n```\n\n`type`可选`scroll`、`fixed-top`、`fixed-bottom`，分别代表滚动弹幕、固定顶部弹幕、底部弹幕。默认为`scroll`。\n\n### start()\n弹幕开始\n\n### stop()\n弹幕暂停\n\n### resize([,width])\n宽度会影响弹幕轨道的宽度，当`canvas`的宽度更改时，务必调用该方法更新轨道宽度。\n\n### clear()\n清空弹幕\n\n### setOpacity(opacity = 1)\n设置弹幕文字的不透明度，默认为`1`，即不透明。取值区间为`[0,1]`。\n\n### setFontSize(zoom = 1)\n全局设置文字的缩放大小。需要注意的是，`setFontSize`并不会改变实话配置中的`fontSize`大小，而是通过设置`config.zoom`（缩放比率）的方式更改输出文字的大小。默认为`1`。\n\n### $on(eventName, handler)\n绑定事件处理器。\n\n### $once(eventName, handler)\n绑定事件处理器，但它只会执行一次。\n\n### $off(eventName[, handler])\n接触事件处理器，当`handler`不传时，会消除`eventName`事件的所有回调。\n\n### $emit(eventName[, ...args])\n触发事件处理器，从第二个参数开始可以传入回调函数的参数。\n\n### onBarrageHover(handler) `***仅作用于HTML+CSS渲染***`\n当鼠标定位到某个弹幕时触发，`handler`回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。\n\n### onBarrageBlur(handler) `***仅作用于HTML+CSS渲染***`\n当鼠标从某个弹幕移出时触发，`handler`回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。\n\n### onBarrageClick(handler) `***仅作用于HTML+CSS渲染***`\n当鼠标点击某个弹幕时触发，`handler`回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。\n\n## License\nMIT","readmeFilename":"README.md"}