微信小程序——用canvas画星星评分条（自定义星星数量及角度）

微信小程序评分器

这个评分器是用canvas制作的而非图片，其插件大小相对于图片而言要小很多，这个star评分器可以定义星星数量、背景色、星星的角数（例如五角星，六角星）、星星边的颜色、涂鸦的颜色、线条粗细、满分总分（例如可以设置100分满分10分满分，评分器会根据点亮的星星个数自动计算。）当然插件大小也可以定义，当插件大小变化时星星也会跟着变化。（有些功能我太懒了，暂时没有需求就没弄上去比如显示2.2分，那么画两个星星然后再画第三个星星的1/5个角）

效果图

插件引用：

.wxml

<star bindScoreChange="getScore" starData="{{starData}}"/>

.js
Page({
  data:{
    starData:{
    width:500,
    height:100, 
    lineColor:"blue",//星星的边界颜色
    cape:"10",//星星的角数
    fillColor:"blue",//星星填充颜色
    starNum:"5",//星星个数
    bgColor:"white",//背景颜色
    totalScore:"100"，//总分
    lineWidth:"1"//线条粗细
   
    }
  },
  getScore(e){//可以传递当前得分
    console.log("e" + e.detail.score)
  },
}) 

引用方法：

一、在pages文件下的 .json配置文件引入我们的插件

{
  "usingComponents": {

    "star":"plugin://myPlugin/star"

  }
}

二、在**. wxml**文件下引入评分噐的标签

<star bindScoreChange="getScore" starData="{{starData}}"/>

**getScore（）**方法是捕获用户点击事件，获取用户给的分值
三、在 .js文件下设置数据以及创建接收函数

Page({
    data:{
      starData:{
      width:500,
      height:100, 
      lineColor:"blue",//星星的边界颜色
      cape:"10",//星星的角数
      fillColor:"blue",//星星填充颜色
      starNum:"5",//星星个数
      bgColor:"white",//背景颜色
      totalScore:"100"，//总分
      lineWidth:"1"//线条粗细
      }
    },
    getScore(e){
      console.log("e" + e.detail.score)
    },
  })  

这些弄好就可以玩了：
比如我要五角星要10个，那么设置cape:5, starNum:10我们来看一下效果：

我要小粉色星星：那么设置fillColor:"pink"

100分太多了要别的分总分3分，那么我们设置totalScore:3

我要换背景色好的，我们设置背景色为绿色**bgColor:“green”**吧，不同颜色之间也可以有分割线，但是这里我没有加上去，有需要的可以询问我

还有改变控件大小，星星也会一起改变等等，好了今天就这样吧。贴代码有点累，有人要我再贴吧