391 lines
13 KiB
Vue
391 lines
13 KiB
Vue
<template>
|
||
<view class="raffle-wheel" :style="{ width: canvasWidth + 44 + 'px', height: canvasHeight + 44 + 'px'}">
|
||
<view class="raffle-wheel-wrap" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}">
|
||
<canvas
|
||
:class="className"
|
||
:canvas-id="canvasId"
|
||
:width="canvasWidth"
|
||
:height="canvasHeight"
|
||
:style="{
|
||
width: canvasWidth + 'px',
|
||
height: canvasHeight + 'px'
|
||
}"
|
||
/>
|
||
<image
|
||
class="canvas-img"
|
||
:src="canvasImg"
|
||
:style="{
|
||
width: canvasWidth + 'px',
|
||
height: canvasHeight + 'px',
|
||
transform: `rotate(${canvasAngle + targetAngle}deg)`,
|
||
transitionDuration: `${transitionDuration}s`
|
||
}"
|
||
v-if="canvasImg"></image>
|
||
<view class="raffle-wheel__action" @click="handleAction"></view>
|
||
<!-- 为了兼容 app 端 ctx.measureText 所需的标签 -->
|
||
<text class="raffle-wheel__measureText">{{ measureText }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'RaffleWheel',
|
||
props: {
|
||
// canvas 宽度
|
||
canvasWidth: {
|
||
type: Number,
|
||
default: 240
|
||
},
|
||
// canvas 高度
|
||
canvasHeight: {
|
||
type: Number,
|
||
default: 240
|
||
},
|
||
// 奖品列表
|
||
prizeList: {
|
||
type: Array,
|
||
// 必须是偶数
|
||
validator: function (value) {
|
||
return value.length % 2 === 0
|
||
},
|
||
required: true
|
||
},
|
||
// 奖品区块对应背景颜色
|
||
colors: {
|
||
type: Array,
|
||
default: () => [
|
||
'#FFF',
|
||
'#FFE9AA'
|
||
],
|
||
// 必须是偶数且仅为 2 个颜色相互交替
|
||
validator: function (value) {
|
||
return value.length === 2
|
||
}
|
||
},
|
||
// 旋转动画时间 单位s
|
||
duration: {
|
||
type: Number,
|
||
default: 8
|
||
},
|
||
// 旋转的圈数
|
||
ringCount: {
|
||
type: Number,
|
||
default: 8
|
||
},
|
||
// 字体颜色
|
||
fontColor: {
|
||
type: String,
|
||
default: '#C30B29'
|
||
},
|
||
// 文字的大小
|
||
fontSize: {
|
||
type: String,
|
||
default: '12px'
|
||
},
|
||
// 奖品文字多行情况下的行高
|
||
lineHeight: {
|
||
type: Number,
|
||
default: 20
|
||
},
|
||
// 奖品名称所对应的 key 值
|
||
strKey: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
// 奖品文字总长度限制
|
||
strMaxLength: {
|
||
type: Number,
|
||
default: 12
|
||
},
|
||
// 奖品文字多行情况下第一行文字长度
|
||
strLineLength: {
|
||
type: Number,
|
||
default: 6
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
// 画板className
|
||
className: 'raffle-wheel__canvas',
|
||
// 画板标识
|
||
canvasId: 'raffleWheelCanvas',
|
||
// 画板导出的图片
|
||
canvasImg: '',
|
||
// 旋转到奖品目标需要的角度
|
||
targetAngle: 0,
|
||
// 旋转动画时间 单位 s
|
||
transitionDuration: 0,
|
||
// 是否正在旋转
|
||
isRotate: false,
|
||
// 当前停留在那个奖品的序号
|
||
stayIndex: 0,
|
||
// 解决 app 不支持 measureText 的问题
|
||
measureText: ''
|
||
}
|
||
},
|
||
computed: {
|
||
// 设备像素密度
|
||
pixelRatio () {
|
||
return uni.getSystemInfoSync().pixelRatio
|
||
},
|
||
// 根据奖品列表计算 canvas 旋转角度
|
||
// 让 启动按钮指针 在奖品分区中间 position = 45
|
||
// 让 启动按钮指针 在奖品分区边界 position = 90
|
||
canvasAngle () {
|
||
let prizeCount = this.prizeList.length
|
||
let position = 90
|
||
if (prizeCount % 4 !== 0) {
|
||
return 0
|
||
} else {
|
||
let num = prizeCount / 4
|
||
return num % 2 === 0 ? position / num : position
|
||
}
|
||
},
|
||
// 根据画板的宽度计算奖品文字与中心点的距离
|
||
textRadius () {
|
||
return Math.round(this.canvasWidth / 2.4)
|
||
}
|
||
},
|
||
methods: {
|
||
// 开始旋转
|
||
handleStartRotate (targetIndex) {
|
||
// 奖品总数
|
||
let prizeCount = this.prizeList.length
|
||
let baseAngle = 360 / prizeCount
|
||
let angles = 0
|
||
if (this.targetAngle === 0) {
|
||
console.log('第一次旋转')
|
||
// 因为第一个奖品是从0°开始的，即水平向右方向
|
||
// 第一次旋转角度 = 270度 - (停留的序号-目标序号) * 每个奖品区间角度 - 每个奖品区间角度的一半 - canvas自身旋转的度数
|
||
angles = (270 - (targetIndex - this.stayIndex) * baseAngle - baseAngle / 2) - this.canvasAngle
|
||
} else {
|
||
console.log('后续旋转')
|
||
// 后续继续旋转 就只需要计算停留的位置与目标位置的角度
|
||
angles = -(targetIndex - this.stayIndex) * baseAngle
|
||
}
|
||
// 更新目前序号
|
||
this.stayIndex = targetIndex
|
||
// 转 8 圈，圈数越多，转的越快
|
||
this.targetAngle += angles + 360 * this.ringCount
|
||
|
||
// 计算转盘结束对时间，预加一些延迟确保转盘停止后触发结束事件
|
||
let endTime = this.transitionDuration * 1000 + 100
|
||
setTimeout(() => {
|
||
this.isRotate = false
|
||
this.$emit('actionEnd', this.stayIndex)
|
||
}, endTime)
|
||
},
|
||
// 点击 开始抽奖 按钮
|
||
handleAction () {
|
||
if (this.isRotate) return
|
||
this.isRotate = true
|
||
this.$emit('actionStart')
|
||
},
|
||
// 渲染转盘
|
||
async drawWheelCanvas () {
|
||
// 获取 canvas 画布
|
||
const canvasId = this.canvasId
|
||
const ctx = uni.createCanvasContext(canvasId, this)
|
||
|
||
// canvas 的宽高
|
||
let canvasW = this.canvasWidth
|
||
let canvasH = this.canvasHeight
|
||
|
||
// 根据奖品个数计算 角度
|
||
let prizeCount = this.prizeList.length
|
||
let baseAngle = Math.PI * 2 / prizeCount
|
||
// 在给定矩形内清空一个矩形
|
||
ctx.clearRect(0, 0, canvasW, canvasH)
|
||
|
||
// 设置描边颜色
|
||
ctx.strokeStyle = '#FFBE04'
|
||
|
||
// 设置字号字体，Canvas 文本字号字体的默认值是 10px sans-serif，这里必须对 字号 字体 同时覆盖
|
||
let family = "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif"
|
||
ctx.font = `${this.fontSize} ${family}`
|
||
|
||
// 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
|
||
// 画具体内容
|
||
for (let i = 0; i < prizeCount; i++) {
|
||
// 当前角度
|
||
let angle = i * baseAngle
|
||
// console.log('当前角度', angle)
|
||
|
||
// 开始画内容
|
||
ctx.beginPath()
|
||
|
||
// 开始画圆弧
|
||
// context.arc(x, y, ratius, startAngle, endAngle, anticlockwise)
|
||
// x => 圆弧对应的圆心横坐标 x
|
||
// y => 圆弧对应的圆心横坐标 y
|
||
// radius => 圆弧的半径大小
|
||
// startAngle => 圆弧开始的角度，单位是弧度
|
||
// endAngle => 圆弧结束的角度，单位是弧度
|
||
// anticlockwise(可选) => 绘制方向，true 为逆时针，false 为顺时针
|
||
let outsideRadius = canvasW / 2
|
||
let insideRadius = 20
|
||
ctx.arc(canvasW * 0.5, canvasH * 0.5, outsideRadius, angle, angle + baseAngle, false)
|
||
ctx.arc(canvasW * 0.5, canvasH * 0.5, insideRadius, angle + baseAngle, angle, true)
|
||
// 开始链接线条
|
||
ctx.stroke()
|
||
// 每个奖品区块背景填充颜色
|
||
ctx.fillStyle = this.colors[i % 2]
|
||
// 填充颜色
|
||
ctx.fill()
|
||
// 保存当前画布的状态
|
||
ctx.save()
|
||
|
||
// 开始绘制奖品内容
|
||
ctx.fillStyle = this.fontColor
|
||
let rewardName = this.strLimit(this.prizeList[i][this.strKey])
|
||
|
||
// translate方法重新映射画布上的 (0,0) 位置
|
||
let translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2 ) * this.textRadius
|
||
let translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * this.textRadius
|
||
ctx.translate(translateX, translateY)
|
||
|
||
// rotate方法旋转当前的绘图，因为文字是和当前扇形中心线垂直的
|
||
ctx.rotate(angle + (baseAngle / 2 ) + (Math.PI / 2))
|
||
|
||
// 设置文本位置并处理换行
|
||
// console.log('原始文本', rewardName)
|
||
if (rewardName.length > this.strLineLength && this.strLineLength !== 0) {
|
||
rewardName = rewardName.substring(0, this.strLineLength) + ',' + rewardName.substring(this.strLineLength)
|
||
let rewardNames = rewardName.split(',')
|
||
// console.log('多行文本', rewardNames)
|
||
for (let j = 0; j < rewardNames.length; j++) {
|
||
if (ctx.measureText && ctx.measureText(rewardNames[j]).width) {
|
||
ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * this.lineHeight)
|
||
} else {
|
||
this.measureText = rewardNames[j]
|
||
await this.$nextTick()
|
||
let textWidth = await this.getTextWidth()
|
||
ctx.fillText(rewardNames[j], -textWidth / 2, j * this.lineHeight)
|
||
// console.log(rewardNames[j], textWidth, i)
|
||
}
|
||
}
|
||
} else {
|
||
if (ctx.measureText && ctx.measureText(rewardName).width) {
|
||
ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0)
|
||
} else {
|
||
this.measureText = rewardName
|
||
await this.$nextTick()
|
||
let textWidth = await this.getTextWidth()
|
||
ctx.fillText(rewardName, -textWidth / 2, 0)
|
||
// console.log(rewardName, textWidth, i)
|
||
}
|
||
}
|
||
// 还原画板的状态到上一个save()状态之前
|
||
ctx.restore()
|
||
}
|
||
// 保存绘图并导出图片
|
||
ctx.draw(true, () => {
|
||
uni.canvasToTempFilePath({
|
||
destWidth: this.canvasWidth * this.pixelRatio,
|
||
destHeight: this.canvasHeight * this.pixelRatio,
|
||
canvasId: this.canvasId,
|
||
success: (res) => {
|
||
// 在 H5 平台下，tempFilePath 为 base64
|
||
// console.log(res.tempFilePath)
|
||
this.canvasImg = res.tempFilePath
|
||
// 通知父级组件，抽奖转品生成图片完成
|
||
this.$emit('done')
|
||
}
|
||
}, this)
|
||
})
|
||
},
|
||
// 兼容 app 端不支持 ctx.measureText
|
||
// 已知问题：初始绘制时，低端安卓机 平均耗时 2s
|
||
getTextWidth () {
|
||
return new Promise((resolve, reject) => {
|
||
uni.createSelectorQuery().in(this).select('.raffle-wheel__measureText').fields({
|
||
size: true,
|
||
}, (res) => {
|
||
resolve(res.width)
|
||
}).exec()
|
||
})
|
||
},
|
||
// 处理文字溢出
|
||
strLimit (value) {
|
||
let maxLength = this.strMaxLength
|
||
if (!value || !maxLength) return value
|
||
return value.length > maxLength ? value.slice(0, maxLength - 1) + '...' : value
|
||
}
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.drawWheelCanvas()
|
||
this.transitionDuration = this.duration
|
||
}, 50)
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$actionBgUrl: '~static/raffle-wheel/raffle-wheel__action';
|
||
$raffleBgUrl: '~static/raffle-wheel/raffle-wheel__bg';
|
||
.raffle-wheel {
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.raffle-wheel {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
background-size: contain;
|
||
background-image: url($raffleBgUrl + ".png");
|
||
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
|
||
background-image: url($raffleBgUrl + "@2x.png");
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
|
||
background-image: url($raffleBgUrl + "@3x.png");
|
||
}
|
||
}
|
||
.raffle-wheel__canvas {
|
||
position: absolute;
|
||
left: -9999px;
|
||
opacity: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.raffle-wheel__action {
|
||
position: absolute;
|
||
top: calc(50% - 58px);
|
||
left: calc(50% - 58px);
|
||
width: 114px;
|
||
height: 114px;
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
background-size: contain;
|
||
background-image: url($actionBgUrl + ".png");
|
||
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
|
||
background-image: url($actionBgUrl + "@2x.png");
|
||
}
|
||
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
|
||
background-image: url($actionBgUrl + "@3x.png");
|
||
}
|
||
}
|
||
.raffle-wheel__measureText {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
opacity: 0;
|
||
}
|
||
.canvas-img {
|
||
transition: transform cubic-bezier(.34,.12,.05,.95);
|
||
}
|
||
</style>
|