小程序模板網(wǎng)

微信小程序-測(cè)試游戲生成六邊多邊形

發(fā)布時(shí)間:2018-09-11 15:43 所屬欄目:小程序開(kāi)發(fā)教程

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

效果demo類(lèi)似

分析

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

繪畫(huà)等邊六邊形

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

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

用css方式把它畫(huà)出來(lái)。

相信三角形的畫(huà)法大家應(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ù)屬性值畫(huà)點(diǎn)連線(xiàn)

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

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


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)算出來(lái);


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代碼并沒(méi)有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)在我們來(lái)把點(diǎn)連成;我們可以采用 微信小程序canvas api 來(lái)繪制我們的六條線(xiàn)

先建立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ǔ)一樣的東西

我們給線(xiàn)加上顏色和寬度


ctx.setStrokeStyle('yellow')  // 線(xiàn)條顏色
ctx.setLineWidth(2)  // 線(xiàn)條寬度
復(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)畫(huà),修改屬性值,完成整個(gè)效果;

dom


<view class="canvas-module" animation="{{animationData}}">
  <canvas canvas-id="myCanvas" class="canvas-class"/>
</view>
<button @tap="goStart">開(kāi)始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()
  }
}

效果如下


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24793.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)