07_微信小程序之大转盘自定义组件编写
一.界面布局
通过传入的size控制圆盘大小
<!--components/turntable/index.wxml-->
<view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;">
<image class="outer" src="../../images/outer.png"></image>
<canvas class="canvas" type="2d" id="canvas"></canvas>
<image class="start" src="../../images/start.png"></image>
</view>
/* components/turntable/index.wxss */
.turntable {
position: relative;
margin-left: 50%;
transform: translateX(-50%);
}
.outer {
width: 100%;
height: 100%;
}
.canvas {
position: absolute;
left: 40rpx;
top: 40rpx;
width: calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
.start {
position: absolute;
width: 112rpx;
height: 124rpx;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 99;
}
// components/turntable/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
size: {
type: Number,
value: 600,
observer: function(newVal, oldVal) {
this.setData({
size: newVal
})
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
二.根据奖品个数绘制扇形组成圆盘
// components/turntable/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
size: {
type: Number,
value: 600,
observer: function(newVal, oldVal) {
this.setData({
size: newVal
})
}
},
prizeList: {
type: Array,
value: [],
observer: function(newVal, oldVal) {
this.setData({
prizeList: newVal
})
this.initTurntable()
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
initTurntable: function() {
var that = this
const query = that.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
//圆心坐标
var centerX = (res[0].width/2)
var centerY = (res[0].height/2)
//半径
var radius = (res[0].width/2)
//奖品数量
var num = that.data.prizeList.length
// 扇形旋转转角度
var rotateDeg = 360 / num / 2 + 90
//绘制扇形
for(var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(centerX, centerY);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, radius, 0, 2 * Math.PI / num, false);
var k = i%3
var colors = ['#D7D7D7', '#FEF43E', '#EF7683']
var color = colors[k]
ctx.fillStyle = color
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#e4370e';
ctx.stroke();
// 恢复前一个状态
ctx.restore();
}
})
}
}
})
坑坑坑,由于canvas2d在模拟器上的兼容性不是很理想,按理说canvas以2d模式渲染时,开始按钮应该会覆盖在画布上显示,但是如下图所示,并没有:
那么再用真机试试看：
可以看到在ios是正常的,但是在android端却还是不显示开始按钮,这就尴尬了,而且本人亲测,前面几天在android端canvas2d的渲染一切正常,于是乎开始检查代码,最终还是没发现什么问题🐶
最后发现微信小程序的sdk 2.14.0 版本显示灰度中,正好本人手机上小程序的sdk版本是2.14.0,于是大胆猜想应该是这个原因了,当然,这种情况可以等待微信的灰度完成后,在看下正常与否
这个问题其实我们不必担心,因为我们只需要把画布画出的圆盘转换成图片,作为背景显示在view标签上,这里的画布只是用来绘制圆盘,并不用于显示,所以需要将画布移出显示范围
三.将圆盘转为base64并显示
<!--components/turntable/index.wxml-->
<view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;">
<image class="outer" src="./images/outer.png"></image>
<canvas class="canvas" type="2d" id="canvas"></canvas>
<view class="secs" style="background-size: cover; background-image: url({{secs}});"></view>
<image class="start" src="./images/start.png"></image>
</view>
/* components/turntable/index.wxss */
.turntable {
position: relative;
margin-left: 50%;
transform: translateX(-50%);
}
.outer {
width: 100%;
height: 100%;
}
.canvas {
position: fixed;
left: 40rpx;
top: -10000px;
width: calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
.secs {
position: absolute;
left: 40rpx;
top: 40rpx;
width: calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
.start {
position: absolute;
width: 112rpx;
height: 124rpx;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 99;
}
// components/turntable/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
size: {
type: Number,
value: 600,
observer: function(newVal, oldVal) {
this.setData({
size: newVal
})
}
},
prizeList: {
type: Array,
value: [],
observer: function(newVal, oldVal) {
this.setData({
prizeList: newVal
})
this.initTurntable()
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
initTurntable: function() {
var that = this
const query = that.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
//圆心坐标
var centerX = (res[0].width/2)
var centerY = (res[0].height/2)
//半径
var radius = (res[0].width/2)
//奖品数量
var num = that.data.prizeList.length
// 扇形旋转转角度
var rotateDeg = 360 / num / 2 + 90
//绘制扇形
for(var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(centerX, centerY);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, radius, 0, 2 * Math.PI / num, false);
var k = i%3
var colors = ['#D7D7D7', '#FEF43E', '#EF7683']
var color = colors[k]
ctx.fillStyle = color
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#e4370e';
ctx.stroke();
// 恢复前一个状态
ctx.restore();
}
//转换画布内容为base64图片
var dataURL=canvas.toDataURL('image/png', 1);
that.setData({
secs: dataURL
})
})
}
}
})
到此,大转盘的样子算是出来了,接下来我们让它转起来吧
四.控制转盘旋转
<!--components/turntable/index.wxml-->
<view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;">
<image class="outer" src="./images/outer.png"></image>
<canvas class="canvas" type="2d" id="canvas"></canvas>
<view class="secs" style="background-size: cover; background-image: url({{secs}}); transform: {{transform}}" bindtransitionend="transitionEnd"></view>
<image class="start" src="./images/start.png" bindtap="start"></image>
</view>
// components/turntable/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
size: {
type: Number,
value: 600,
observer: function(newVal, oldVal) {
this.setData({
size: newVal
})
}
},
prizeList: {
type: Array,
value: [],
observer: function(newVal, oldVal) {
this.setData({
prizeList: newVal
})
this.initTurntable()
}
}
},
/**
* 组件的初始数据
*/
data: {
transform: ""
},
/**
* 组件的方法列表
*/
methods: {
initTurntable: function() {
var that = this
const query = that.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res)
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
//圆心坐标
var centerX = (res[0].width/2)
var centerY = (res[0].height/2)
//半径
var radius = (res[0].width/2)
//奖品数量
var num = that.data.prizeList.length
// 扇形旋转转角度
var rotateDeg = 360 / num / 2 + 90
//绘制扇形
for(var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(centerX, centerY);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, radius, 0, 2 * Math.PI / num, false);
var k = i%3
var colors = ['#D7D7D7', '#FEF43E', '#EF7683']
var color = colors[k]
ctx.fillStyle = color
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#e4370e';
ctx.stroke();
// 恢复前一个状态
ctx.restore();
}
//转换画布内容为base64图片
var dataURL=canvas.toDataURL('image/png', 1);
that.setData({
secs: dataURL
})
})
},
start: function(event) {
this.goto(0)
},
goto: function(index) {
var isTurning = this.data.isTurning
if(isTurning) {
return
}
this.setData({
transform: "rotate(" + 0 + "deg); transition: transform 5s ease-in-out"
})
this.setData({
isTurning: true
})
this.setData({
runRotate:0
})
var prizeNum = this.data.prizeList.length
var rotate = 360/prizeNum * (prizeNum-index)
var sRotate = 360*10+rotate
this.setData({
transform: "rotate(" + sRotate + "deg); transition: transform 5s ease-in-out"
})
},
transitionEnd: function(event) {
//这里转盘停止直接就重置转盘了,实际应该是先弹窗提示用户中奖与否,在用户关闭弹窗时,再重置转盘
var that = this
setTimeout(function() {
that.setData({
transform: "",
isTurning: false
})
}, 3000)
}
}
})
录屏效果不是很好😂
五.摆放奖品
<!--components/turntable/index.wxml-->
<view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;">
<image class="outer" src="./images/outer.png"></image>
<canvas class="canvas" type="2d" id="canvas"></canvas>
<view class="secs" style="background-size: cover; background-image: url({{secs}}); transform: {{transform}}" bindtransitionend="transitionEnd">
<view class="sec" wx:for="{{prizeList}}" style="transform:rotate({{index*360/prizeList.length}}deg);transform-origin: {{centerX}}px {{centerY}}px;">
<view class="prize-name">大礼包</view>
<image class="prize-image" src="./images/gift.png"></image>
</view>
</view>
<image class="start" src="./images/start.png" bindtap="start"></image>
</view>
/* components/turntable/index.wxss */
.turntable {
position: relative;
margin-left: 50%;
transform: translateX(-50%);
}
.outer {
width: 100%;
height: 100%;
}
.canvas {
position: fixed;
left: 40rpx;
top: -10000px;
width: calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
.secs {
position: absolute;
left: 40rpx;
top: 40rpx;
width: calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
.start {
position: absolute;
width: 112rpx;
height: 124rpx;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 99;
}
.sec {
position: absolute;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10%;
}
.prize-name {
font-size: 28rpx;
color: 666;
}
.prize-image {
width: 50rpx;
height: 50rpx;
margin-top: 8rpx;
}
完
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
