微信小程序-测试游戏生成六边多边形

最新又接到新的活动需求啦，是一个测试类的游戏。 大概的看了整个需求，这个活动的难点在于结果页面的六边形指标怎么实现。

效果demo类似

分析

• 背景?
  首先，这是用户对应六个属性值的等边六边形，等边六边形这是一个很关键的点；为什么是等边六边形呢，因为用户留个属性的峰值的一样的，起点也是一致的。
• 中心点?
  这个六边形的中心就是整个圆心的中心位置
• 六个属性坐标位置?
  我们需要各自的属性值算出对应的坐标位置

绘画等边六边形

我们假设要绘画边长为240长度的等边六边形； 我们需要简单的计算下；

我们把底部切成三块，一个三角形+矩形+三角形

用css方式把它画出来。

相信三角形的画法大家应该都很清楚了，这里就不重复讲基础的东西

dom

<view class="six-bg">
  <view "box1"></view>
  <view "box2"></view>
  <view "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: border-bottom: @sixHeightRPX solid #6c6;
    }
    .box2{
      width: @sixWidthBigRPX;
      height: @sixHeightBigRPX;
      background-color: .box3{
      border-top: #6c6;
      @sixWidthRPX solid transparent;
    }
 }
复制代码

效果图

根据属性值画点连线

假设我们把那个属性值的峰值都定为10。我们知道等边六边形的6边长度都为240。那我们的每个单位就是24。

我们先假设6个属性值都满了，那么

data = {
  sixData: {
    one: 10,    two:     three:     four:     five:     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 + .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个点的位置了

现在我们来把点连成；我们可以采用 微信小程序canvas api 来绘制我们的六条线

先建立canvas dom
css布局

.canvas-module{
    position: absolute;
    width: 750rpx;
    height: z-index: 2;
    top: 0;
    left: 0;
    .canvas-class{
      750rpx;
      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)
ctx.lineTo(dotThree.x 2)
ctx.lineTo(dotFour.x 2)
ctx.lineTo(dotFive.x 2)
ctx.lineTo(dotSix.x 2)
ctx.lineTo(dotOne.x 2)
ctx.stroke()
ctx.draw()
复制代码
位置坐标为什么要除以2呢？
因为canvas是以px为单位的
我们再给利用canvas属性，给它加上一点补一样的东西
我们给线加上颜色和宽度
ctx.setStrokeStyle('yellow')  // 线条颜色
.setLineWidth(2)  // 线条宽度
复制代码
填充渐变颜色
const grd = ctx.createLinearGradient(0,200,0);">0)
grd.addColorStop('red')
grd.addColorStop(1,0);">'white')
ctx.setFillStyle(grd)
ctx.fill()
复制代码
加上透明度
最后我们再加上个动画，修改属性值，完成整个效果；
dom
<view class="canvas-module" animation="{{animationData}}">
  <view>
<button @tap="goStart">开始canvas</button>
复制代码
css
js
data = {
  animationData: {},  sixData: {
    one: 7,0);">6,0);">2,0);">8
  }
};
复制代码
methods = {
  goStart () {
    var animation = wepy.createAnimation({
      duration: 1000,timingFunction: 'ease'
    })
    animation.scale(1).step()
    this.animationData = animation.export()
  }
}
复制代码
效果如下
这样整个动画就算完成了， demo请前往github?github.com/fishmankkk/…
其实背景图也是可以用canvas画的，有兴趣的小伙伴可以动手自己画一下
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!