微信小程式-測試遊戲生成六邊多邊形

fishman發表於2018-09-07
微信小程式遊戲

背景

基於wepy小程式框架

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

效果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;
    }
}
複製程式碼

canvas api文件 developers.weixin.qq.com/miniprogram…

繪製

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()
  }
}
複製程式碼

效果如下

微信小程式-測試遊戲生成六邊多邊形

這樣整個動畫就算完成了， demo請前往github github.com/fishmankkk/…

其實背景圖也是可以用canvas畫的，有興趣的小夥伴可以動手自己畫一下

相關文章