Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

当前版本支持类似送礼物这种内容里有图片的弹幕吗? #95

Closed
bravelincy opened this issue May 31, 2018 · 6 comments
Closed

Comments

@bravelincy
Copy link

像mode为1的这种弹幕,现在只能设置文本text,有办法实现自定义html吗?

@jabbany
Copy link
Owner

jabbany commented May 31, 2018

出于安全性设计,目前的普通弹幕(mode 1-7)都不支持自定义HTML内容。如果想自己实现图片弹幕的话,可以使用mode 10+。

基本实现的话:

  • 首先创造一个类来扩展CoreComment(或者如果想滚动就扩展 ScrollCommentCssScrollComment)参考Comment.ts,这个新的类引用调的正确的话可以单独编译
  • 在这个新的类的constructor里面做手脚来支持特殊的弹幕,比如 init 里面加入检查一个 gift 值,如果是 true 就在 DOM 的 className 里面添加一个新的 gift CSS类。还可以增加新的 field 来允许动态改这个状态等。
  • 照着 CommentFactory 里面 *initializer 写一个函数”实例化“自己刚才写的那个类(比如叫 giftCommentInitializer
  • CommentManager 进行 init() 后把这个新的制造器通过 cm.factory.bind(11, giftCommentInitializer)
  • 在 CommentManager遇到data.mode11 时则会调用你写的实例化函数来实例化你的新弹幕
  • 如果是需要排版的弹幕(滚动或者定位弹幕),目前还需要在 CommentManager 的 send 函数里把 switch 语句加上一个新的 case 11 。如果想和普通滚动弹幕混排就 this.csa.scroll.add(cmt); 否则可以自己再加一个新的滚动空间规划器实例,然后this.csa.myAllocator.add(cmt)

@jabbany jabbany closed this as completed May 31, 2018
@jabbany jabbany reopened this May 31, 2018
@bravelincy
Copy link
Author

谢谢这么详细地指导,我明天试试哈

@jabbany
Copy link
Owner

jabbany commented May 31, 2018

好的~那就先把issue关掉,有新的问题欢迎把这个重新打开~

@jabbany jabbany closed this as completed May 31, 2018
@bravelincy
Copy link
Author

你好,我按照你提供的实现步骤里前5步的做法,基本把功能实现了,感谢!不过好像弹幕寻轨有点问题,图里的最后一条弹幕应该在下面一条轨道,现在发生遮挡了。
image

@jabbany
Copy link
Owner

jabbany commented Jun 22, 2018

噗,之前忘了说了,不仅得在 send 里面把弹幕加到 CommentSpaceAllocator 里,在finish里面还要拿走,参考 这里,把新的类型加一个case,然后调用相应的 csa 的 remove

@bravelincy
Copy link
Author

现在sendfinish这两个方法我没有加新的case所以默认走的default和mode: 1一样使用了csa.scroll轨道,似乎原因和 #77 一样,我暂时用了这个问题提问者提供的willCollide 算法。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants