目录
- 一、实现效果
- 二、总结与思考
废话开篇：通过 canvas 简单拖拽评星，主要是通过个人的理解去实现这样的一个效果。
一、实现效果
html
| <div class="main"> | |
| <div class="score_container"> | |
| <canvas id="canvas" height="100"></canvas> | |
| <div id="score" class="score">评分：0</div> | |
| </div> | |
| </div> |
css
| .main { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: start; | |
| align-items: flex-start; | |
| padding-top: 20px; | |
| padding-left: 20px; | |
| } | |
| .score_container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding-top: 20px; | |
| } | |
| .score { | |
| margin-top: 20px; | |
| } |
js
| // 星星数据对象 | |
| class Pentagram{ | |
| points = [] | |
| minX = 0 | |
| maxX = 0 | |
| deg = (Math.PI / 180) | |
| score = 0 | |
| constructor(index,r,center){ | |
| this.savePentagramData(index,r,center) | |
| } | |
| // 绘制星星 | |
| savePentagramData(currentPentagramIndex,r,{x,y}){ | |
| // 它对应的整数分数 | |
| this.score = currentPentagramIndex + 1 | |
| // 工具函数 | |
| let cos = (d)=>{ return Math.cos(d * this.deg) } | |
| let sin = (d)=>{ return Math.sin(d * this.deg) } | |
| let tan = (d)=>{ return Math.tan(d * this.deg) } | |
| let square = (num)=> { return Math.pow(num,2) } | |
| // 外边比例 | |
| let t = 1 / ((1 + square(tan(18))) / (3 - square(tan(18)))) | |
| this.points = [ | |
| [0,1], | |
| [t*cos(54),t*sin(54)], | |
| [cos(18),sin(18)], | |
| [t*cos(18),-t*sin(18)], | |
| [cos(54),-sin(54)], | |
| [0,-t], | |
| [-cos(54),-sin(54)], | |
| [-t*cos(18),-t*sin(18)], | |
| [-cos(18),sin(18)], | |
| [-t*cos(54),t*sin(54)], | |
| [0,1], | |
| ] | |
| this.points.forEach((point,index)=>{ | |
| point[0] = x + point[0] * (r / t) | |
| point[1] = y + point[1] * (r / t) | |
| if(index == 7) { | |
| // 最右侧的点 | |
| this.minX = point[0] | |
| } | |
| if(index == 3) { | |
| // 最左侧的点 | |
| this.maxX = point[0] | |
| } | |
| }) | |
| } | |
| } | |
| // 星星管理器 | |
| class PentagramManage{ | |
| canvas = null//画板相关 | |
| context = null | |
| pentagramNum = 1//星星个数 | |
| isMouseDown = false//鼠标是否按下 | |
| progress = 0//当前评分位置 | |
| pentagramRadius = 15//星星半径 | |
| pentagramSep = 10//星星间间隔 | |
| pentagrams = []//记录每一个星星对象 | |
| constructor(pentagramNum){ | |
| this.pentagramNum = pentagramNum | |
| this.initData() | |
| this.draw() | |
| this.bindMouseEvent() | |
| } | |
| // 初始化 | |
| initData(){ | |
| this.canvas = document.getElementById('canvas') | |
| for(let i = 0;i < this.pentagramNum;i ++){ | |
| let pentagram = new Pentagram(i,this.pentagramRadius,{x:35 + i * (this.pentagramRadius * 2 + this.pentagramSep),y:(this.canvas.height / 2.0) }) | |
| this.pentagrams.push(pentagram) | |
| if(i == this.pentagramNum - 1){ | |
| this.canvas.width = pentagram.maxX + 20 | |
| } | |
| } | |
| this.context = this.canvas.getContext('2d'); | |
| this.context.fillStyle='white'; | |
| } | |
| //绘制 | |
| draw(){ | |
| this.context.clearRect(0,0,this.canvas.width,this.canvas.height); | |
| this.drawBottomPlate() | |
| let hook = ()=>{ | |
| this.pentagrams.forEach((pentagramItem)=>{ | |
| this.drawPentagram(pentagramItem) | |
| }) | |
| } | |
| this.drawHollowOut(hook) | |
| this.drawStrokeHollowOut(hook) | |
| } | |
| // 绘制底色 | |
| drawBottomPlate(){ | |
| this.context.save() | |
| this.context.fillStyle= 'rgb(247,190,80)'; | |
| this.context.beginPath(); | |
| this.context.rect(0, 0, this.progress, this.canvas.height); | |
| this.context.closePath(); | |
| this.context.fill(); | |
| this.context.restore() | |
| } | |
| // 绘制镂空五角星 | |
| drawHollowOut(hook){ | |
| this.context.beginPath(); | |
| this.context.rect(0, 0, this.canvas.width, this.canvas.height); | |
| hook() | |
| this.context.closePath(); | |
| this.context.fill(); | |
| } | |
| // 绘制五星边框 | |
| drawStrokeHollowOut(hook){ | |
| this.context.save(); | |
| this.context.strokeStyle = 'rgb(247,190,80)'; | |
| // this.context.stroke.width = 1 | |
| this.context.beginPath(); | |
| this.context.rect(0, 0, this.canvas.width, this.canvas.height); | |
| hook() | |
| this.context.closePath(); | |
| this.context.stroke(); | |
| this.context.restore(); | |
| } | |
| // 绘制星星 | |
| drawPentagram(pentagramItem){ | |
| pentagramItem.points.forEach((point,index)=>{ | |
| eval('this.context.' + (index == 0 ? 'moveTo(' : 'lineTo(') + '...point)') | |
| }) | |
| } | |
| // 绑定鼠标事件 | |
| bindMouseEvent(){ | |
| document.onmousemove = (event)=>{ | |
| if(this.isMouseDown){ | |
| let { left } = this.getElementPosition(document.getElementById('canvas')) | |
| this.progress = event.clientX - left | |
| this.draw() | |
| this.getCurrentScore() | |
| } | |
| } | |
| //鼠标按下事件 | |
| document.onmousedown = (event)=>{ | |
| this.isMouseDown = true | |
| let { left } = this.getElementPosition(document.getElementById('canvas')) | |
| this.progress = event.clientX - left | |
| this.draw() | |
| this.getCurrentScore() | |
| } | |
| //鼠标抬起事件 | |
| document.onmouseup = ()=>{ | |
| this.isMouseDown = false | |
| } | |
| } | |
| // 计算分数 | |
| getCurrentScore(){ | |
| let score = 0 | |
| let firstPentagram = this.pentagrams.find((pentagram)=>{ | |
| return this.progress <= pentagram.maxX | |
| }) | |
| if(firstPentagram){ | |
| let float = (Math.floor(((this.progress - firstPentagram.minX) / (firstPentagram.maxX - firstPentagram.minX)) * 10)) / 10 | |
| float = float > 0 ? float : 0 | |
| score = (firstPentagram.score - 1) + float | |
| document.getElementById('score').innerHTML = "评分：" + score | |
| } else { | |
| document.getElementById('score').innerHTML = "评分：" + this.pentagrams.length | |
| } | |
| } | |
| // dom在浏览器的位置 | |
| getElementPosition(element){ | |
| let top = element.offsetTop | |
| let left = element.offsetLeft | |
| let width = element.offsetWidth | |
| let height = element.offsetHeight | |
| var currentParent = element.offsetParent; | |
| while (currentParent !== null) { | |
| top += currentParent.offsetTop | |
| left += currentParent.offsetLeft | |
| currentParent = currentParent.offsetParent | |
| } | |
| return {top,left,width,height} | |
| } | |
| } | |
| var pentagram = new PentagramManage(4) |
二、总结与思考
上层无镂空
上层有镂空
通过 canvas 实现一层镂空五角星层，再在底层添加一个进度层，这样在拖动的时候就能通过拖拽的位置进行数据处理，从而计算出星级数。代码拙劣，大神勿笑