在微信小程序中如何实现手持弹幕功能?

/ 0评 / 0

在哔哩哔哩很多展会看到这个新奇好玩,那么今天我们思考下如何在微信小程序实现这个功能呢?

 

首页前端控制页面,设定所有我们想要的功能
<form bindsubmit="createDanmu">
<input class="input" name="content" placeholder="请填上弹幕内容" value=""></input>
<view class="section">
<view class="section_title">速度</view>
<slider showValue activeColor="#08e037" blockSize="15" class="section_input" max="10" min="1" name="speed" value="5"></slider>
</view>
<view class="section">
<view class="section_title">字体大小</view>
<slider showValue activeColor="#08e037" blockSize="15" class="section_input" max="200" min="15" name="fontSize" value="100"></slider>
</view>
<view class="section">
<view class="section_title">字体颜色</view>
<picker bindchange="selectFontColor" class="picker" name="fontColor" range="{{color_array}}" value="{{font_color_index}}">
<view class="section_input">
当前选择:{{color_array[font_color_index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section_title">背景颜色</view>
<picker bindchange="selectBgColor" class="picker" name="bgColor" range="{{color_array}}" value="{{bg_color_index}}">
<view class="section_input">
当前选择:{{color_array[bg_color_index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section_title">字体方向</view>
<radio-group color="#08e037" name="direction">
<label class="radio">
<radio color="#08e037" value="leftToRight"></radio>从左往右</label>
<label class="radio">
<radio checked="true" color="#08e037" value="rightToLeft"></radio>从右往左</label>
</radio-group>
</view>
<view>
<button class="button" formType="submit" hoverClass="button-hover">生成弹幕</button>
</view>
</form><view class="adContainer">
<ad unit-id="adunit-db83411bc0a7051e" ad-intervals="30" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

相应的js控制
Page({
data: {
color_array: [ "白", "黑", "红", "橙", "黄", "绿", "青", "蓝", "紫" ],
font_color_index: 0,
bg_color_index: 1
},
selectFontColor: function(o) {
this.setData({
font_color_index: o.detail.value
});
},
selectBgColor: function(o) {
this.setData({
bg_color_index: o.detail.value
});
},
createDanmu: function(o) {
var e = o.detail.value, t = e.content;
null != t && " " != t && "" != t || (t = "请输入弹幕内容"), console.log(e), wx.navigateTo({
url: "show_danmu?content=" + t + "&speed=" + e.speed + "&fontSize=" + e.fontSize + "&fontColor=" + e.fontColor + "&bgColor=" + e.bgColor + "&direction=" + e.direction
});
},
onShareAppMessage: function(o) {
return {
title: "一个木函--手持弹幕",
path: "/pages/tools/danmu/danmu",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

好嘞控制台这样确定了那么效果图我们怎么做呢?
在参观了几个模板后敲定使用
直接粗暴的办法
<canvas canvasId="bgCanvas" id="bgCanvas"></canvas>
<canvas canvasId="textCanvas" id="textCanvas"></canvas>

对的就是直接干
var t;

Page({
data: {
color_array: [ "白", "黑", "红", "橙", "黄", "绿", "青", "蓝", "紫" ],
color: [ "#ffffff", "#000000", "#ff0000", "#ff8800", "#ffff00", "#00ff00", "#00fff0", "#0000ff", "#ff00ff" ],
content: "请输入弹幕",
speed: "5",
fontSize: "200",
fontColor: "0",
bgColor: "1",
direction: "leftToRight",
pageH: 0,
pageW: 0
},
onLoad: function(a) {
t && clearInterval(t);
var e = this;
e.setData({
content: a.content,
speed: a.speed,
fontSize: a.fontSize,
fontColor: a.fontColor,
bgColor: a.bgColor,
direction: a.direction
}), wx.getSystemInfo({
success: function(t) {
e.setData({
pageH: t.windowHeight,
pageW: t.windowWidth
});
}
});
var o = e.data.color[parseInt(e.data.bgColor)], n = wx.createCanvasContext("bgCanvas", this);
n.setFillStyle(o), n.fillRect(0, 0, e.data.pageW, e.data.pageH), n.draw(!0), wx.setNavigationBarColor && wx.setNavigationBarColor({
frontColor: o,
backgroundColor: o
});
var r = 0, i = 0, d = parseInt(20 - 2 * e.data.speed + 1), s = parseInt(e.data.fontSize * e.data.pageW / 200), l = e.data.color[parseInt(e.data.fontColor)];
t = setInterval(function() {
var t = wx.createCanvasContext("textCanvas", this);
t.setFontSize(s);
var a = t.measureText(e.data.content).width;
t.setFillStyle(l), "rightToLeft" == e.data.direction && (t.translate(parseInt(.45 * e.data.pageW), 0),
t.rotate(-.5 * Math.PI), t.save(), r < -a - e.data.pageH && (r = 0), t.setTextBaseline("middle"),
t.fillText(e.data.content, r--, 0), t.stroke(), t.draw(), t.restore()), "leftToRight" == e.data.direction && (t.translate(parseInt(.45 * e.data.pageW), e.data.pageH),
t.rotate(-.5 * Math.PI), t.save(), i > e.data.pageH && (i = -a), t.setTextBaseline("middle"),
t.fillText(e.data.content.split("").reverse().join(""), i++, 0), t.stroke(), t.draw(),
t.restore());
}, d);
},
stopDanmu: function() {
clearInterval(t);
},
onUnload: function() {
clearInterval(t);
},
onHide: function() {
clearInterval(t);
},
onShareAppMessage: function(t) {
var a = this;
return {
title: "一个木函--你收到一条弹幕",
path: "/pages/tools/danmu/show_danmu?content=" + a.data.content + " & speed=" + a.data.speed + "&fontSize=" + a.data.fontSize + "&fontColor=" + a.data.fontColor + "&bgColor=" + a.data.bgColor + "&direction=" + a.data.direction,
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

这样的话就大功告成了

评论已关闭。