最新又接到新的活動需求啦，是一個測試類的游戲。 大概的看了整個需求，這個活動的難點在于結果頁面的六邊形指標怎么實現。

效果demo類似

分析

• 背景 
  首先，這是用戶對應六個屬性值的等邊六邊形，等邊六邊形這是一個很關鍵的點；為什么是等邊六邊形呢，因為用戶留個屬性的峰值的一樣的，起點也是一致的。
• 中心點 
  這個六邊形的中心就是整個圓心的中心位置
• 六個屬性坐標位置 
  我們需要各自的屬性值算出對應的坐標位置

繪畫等邊六邊形

我們假設要繪畫邊長為240長度的等邊六邊形； 我們需要簡單的計算下；

我們把底部切成三塊，一個三角形+矩形+三角形

用css方式把它畫出來。

相信三角形的畫法大家應該都很清楚了，這里就不重復講基礎的東西

dom

<view class="six-bg">
  <view class="box1"></view>
  <view class="box2"></view>
  <view class="box3"></view>
</view>
復制代碼

css

@sixWidthRPX: 208rpx; // 240*cos30°
@sixHeightRPX: 120rpx; // 240*sin30°
@sixWidthBigRPX: 416rpx;
@sixHeightBigRPX: 240rpx;
.six-bg{
    padding: 167rpx;
    .box1{
      width:0;
      border-left: @sixWidthRPX solid transparent;
      border-right: @sixWidthRPX solid transparent;
      border-bottom: @sixHeightRPX solid #6c6;
    }
    .box2{
      width: @sixWidthBigRPX;
      height: @sixHeightBigRPX;
      background-color: #6c6;
    }
    .box3{
      width:0;
      border-top: @sixHeightRPX solid #6c6;
      border-left: @sixWidthRPX solid transparent;
      border-right: @sixWidthRPX solid transparent;
    }
 }
復制代碼

效果圖

根據屬性值畫點連線

假設我們把那個屬性值的峰值都定為10。我們知道等邊六邊形的6邊長度都為240。那我們的每個單位就是24。

我們先假設6個屬性值都滿了，那么

data = {
  sixData: {
    one: 10,
    two: 10,
    three: 10,
    four: 10,
    five: 10,
    six: 10
  }
}
復制代碼

我們找下等邊六邊形的圓形點。

X軸位置 167+208 = 375

Y軸位置 167+240 = 407

6個坐標位置

第一個點的坐標和第四個點的坐標是最容易計算的，我們先把這兩個點的坐標算出來；

const unit = 24  // 單位
const centerDotX = 375  // 中心點
const centerDotY = 407  // 中心點
// 第一個點 位置
let dotOne = {
    x: centerDotX,
    y: centerDotY - this.sixData.one * unit
}
// 第四個點 位置
let dotFour = {
    x: centerDotX,
    y: centerDotY + this.sixData.four * unit
}
復制代碼

第二、三、五、六點的坐標我們就需要用到三角函數了；

我們觀察下這個圖，發現 2、3、5、6點都有30度的夾角；

第二點坐標

const lineLongTwo = unit * this.sixData.two
x = centerDotX + lineLongTwo*cos30
y = centerDotY - lineLongTwo*sin30
復制代碼

我們的js代碼并沒有cos、sin的方法；

這時候我們需要補一下Math函數的知識；

Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之間；

Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之間的數；

這兩個函數中的X 都是指的“弧度”而非“角度”，

弧度的計算公式為：

(度數 * Math.PI) / 180；

現在我們可以算出6個點的位置了

const unit = 24  // 單位
const centerDotX = 375  // 中心點
const centerDotY = 407  // 中心點
// 第一個點 位置
let dotOne = {
    x: centerDotX,
    y: centerDotY - this.sixData.one * unit
}
// 第二個點 位置
const lineLongTwo = unit * this.sixData.two
let dotTwo = {
    x: centerDotX + lineLongTwo * Math.cos((30 * Math.PI) / 180),
    y: centerDotY - lineLongTwo * Math.sin((30 * Math.PI) / 180)
}
// 第三個點 位置
const lineLongThree = unit * this.sixData.three
let dotThree = {
    x: centerDotX + lineLongThree * Math.cos((30 * Math.PI) / 180),
    y: centerDotY + lineLongThree * Math.sin((30 * Math.PI) / 180)
}
// 第四個點 位置
let dotFour = {
    x: centerDotX,
    y: centerDotY + this.sixData.four * unit
}
// 第五個點 位置
const lineLongFive = unit * this.sixData.five
let dotFive = {
    x: centerDotX - lineLongFive * Math.cos((30 * Math.PI) / 180),
    y: centerDotY + lineLongFive * Math.sin((30 * Math.PI) / 180)
}
// 第六個點 位置
const lineLongSix = unit * this.sixData.six
let dotSix = {
    x: centerDotX - lineLongSix * Math.cos((30 * Math.PI) / 180),
    y: centerDotY - lineLongSix * Math.sin((30 * Math.PI) / 180)
}
復制代碼

現在我們來把點連成；我們可以采用 微信小程序canvas api 來繪制我們的六條線

先建立canvas dom

<view class="canvas-module">
  <canvas canvas-id="myCanvas" class="canvas-class"/>
</view>
復制代碼

css布局

.canvas-module{
    position: absolute;
    width: 750rpx;
    height: 750rpx;
    z-index: 2;
    top: 0;
    left: 0;
    .canvas-class{
      width: 750rpx;
      height: 750rpx;
    }
}
復制代碼

繪制

復制代碼
const ctx = wepy.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(dotOne.x / 2, dotOne.y / 2)
ctx.lineTo(dotTwo.x / 2, dotTwo.y / 2)
ctx.lineTo(dotThree.x / 2, dotThree.y / 2)
ctx.lineTo(dotFour.x / 2, dotFour.y / 2)
ctx.lineTo(dotFive.x / 2, dotFive.y / 2)
ctx.lineTo(dotSix.x / 2, dotSix.y / 2)
ctx.lineTo(dotOne.x / 2, dotOne.y / 2)
ctx.stroke()
ctx.draw()

位置坐標為什么要除以2呢？

因為canvas是以px為單位的

效果圖

我們再給利用canvas屬性，給它加上一點補一樣的東西

我們給線加上顏色和寬度

ctx.setStrokeStyle('yellow')  // 線條顏色
ctx.setLineWidth(2)  // 線條寬度
復制代碼

填充漸變顏色

const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
ctx.setFillStyle(grd)
ctx.fill()
復制代碼

加上透明度

ctx.setGlobalAlpha(0.7)
復制代碼

效果圖

最后我們再加上個動畫，修改屬性值，完成整個效果；

dom

<view class="canvas-module" animation="{{animationData}}">
  <canvas canvas-id="myCanvas" class="canvas-class"/>
</view>
<button @tap="goStart">開始canvas</button>
復制代碼

css

.canvas-module{
    position: absolute;
    width: 750rpx;
    height: 750rpx;
    z-index: 2;
    top: 0;
    left: 0;
    transform: scale(0);  //新增樣式
    .canvas-class{
      width: 750rpx;
      height: 750rpx;
    }
}
復制代碼

js

復制代碼
data = {
  animationData: {},
  sixData: {
    one: 10,
    two: 7,
    three: 1,
    four: 6,
    five: 2,
    six: 8
  }
};

復制代碼
methods = {
  goStart () {
    var animation = wepy.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    animation.scale(1, 1).step()
    this.animationData = animation.export()
  }
}

效果如下