最新又接到新的活動(dòng)需求啦，是一個(gè)測(cè)試類的游戲。 大概的看了整個(gè)需求，這個(gè)活動(dòng)的難點(diǎn)在于結(jié)果頁面的六邊形指標(biāo)怎么實(shí)現(xiàn)。

效果demo類似

分析

• 背景 
  首先，這是用戶對(duì)應(yīng)六個(gè)屬性值的等邊六邊形，等邊六邊形這是一個(gè)很關(guān)鍵的點(diǎn)；為什么是等邊六邊形呢，因?yàn)橛脩袅魝€(gè)屬性的峰值的一樣的，起點(diǎn)也是一致的。
• 中心點(diǎn) 
  這個(gè)六邊形的中心就是整個(gè)圓心的中心位置
• 六個(gè)屬性坐標(biāo)位置 
  我們需要各自的屬性值算出對(duì)應(yīng)的坐標(biāo)位置

繪畫等邊六邊形

我們假設(shè)要繪畫邊長(zhǎng)為240長(zhǎng)度的等邊六邊形； 我們需要簡(jiǎn)單的計(jì)算下；

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

用css方式把它畫出來。

相信三角形的畫法大家應(yīng)該都很清楚了，這里就不重復(fù)講基礎(chǔ)的東西

dom

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

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;
    }
 }
復(fù)制代碼

效果圖

根據(jù)屬性值畫點(diǎn)連線

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

我們先假設(shè)6個(gè)屬性值都滿了，那么

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

我們找下等邊六邊形的圓形點(diǎn)。

X軸位置 167+208 = 375

Y軸位置 167+240 = 407

6個(gè)坐標(biāo)位置

第一個(gè)點(diǎn)的坐標(biāo)和第四個(gè)點(diǎn)的坐標(biāo)是最容易計(jì)算的，我們先把這兩個(gè)點(diǎn)的坐標(biāo)算出來；

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

第二、三、五、六點(diǎn)的坐標(biāo)我們就需要用到三角函數(shù)了；

我們觀察下這個(gè)圖，發(fā)現(xiàn) 2、3、5、6點(diǎn)都有30度的夾角；

第二點(diǎn)坐標(biāo)

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

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

這時(shí)候我們需要補(bǔ)一下Math函數(shù)的知識(shí)；

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

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

這兩個(gè)函數(shù)中的X 都是指的“弧度”而非“角度”，

弧度的計(jì)算公式為：

(度數(shù) * Math.PI) / 180；

現(xiàn)在我們可以算出6個(gè)點(diǎn)的位置了

const unit = 24  // 單位
const centerDotX = 375  // 中心點(diǎn)
const centerDotY = 407  // 中心點(diǎn)
// 第一個(gè)點(diǎn) 位置
let dotOne = {
    x: centerDotX,
    y: centerDotY - this.sixData.one * unit
}
// 第二個(gè)點(diǎn) 位置
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)
}
// 第三個(gè)點(diǎn) 位置
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)
}
// 第四個(gè)點(diǎn) 位置
let dotFour = {
    x: centerDotX,
    y: centerDotY + this.sixData.four * unit
}
// 第五個(gè)點(diǎn) 位置
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)
}
// 第六個(gè)點(diǎn) 位置
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)
}
復(fù)制代碼

現(xiàn)在我們來把點(diǎn)連成；我們可以采用 微信小程序canvas api 來繪制我們的六條線

先建立canvas dom

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

css布局

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

繪制

復(fù)制代碼
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()

位置坐標(biāo)為什么要除以2呢？

因?yàn)閏anvas是以px為單位的

效果圖

我們?cè)俳o利用canvas屬性，給它加上一點(diǎn)補(bǔ)一樣的東西

我們給線加上顏色和寬度

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

填充漸變顏色

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

加上透明度

ctx.setGlobalAlpha(0.7)
復(fù)制代碼

效果圖

最后我們?cè)偌由蟼€(gè)動(dòng)畫，修改屬性值，完成整個(gè)效果；

dom

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

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;
    }
}
復(fù)制代碼

js

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

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

效果如下