微信小程序使用二次贝塞尔曲线画波浪

发布时间:2019-06-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序使用二次贝塞尔曲线画波浪脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

这两周做一个新的项目,人员比较紧张,除了需求和UI,前端后端一个人来干。

在项目需求确定后,UI隔了几天设计出了UI界面,拿到UI效果图后见有一个界面有波浪效果的我当时就蒙圈了,这都啥玩意啊?转念想到了最近在IT圈挺火的那个事件:产品要求安卓程序员实现根据用户手机壳颜色自动更换APP主题的需求后,顿时觉得画个波浪这个压根就不是事啊。

二次贝塞尔曲线

在微信官方二次贝塞尔曲线画法连接

画波浪

思路:

在屏幕左边画一个波,然后让它一直向屏幕右边平移过去。其X的值由负数变为正数依次增大;然后一直重复此操作。

我画出来的波浪如下(感觉还是有那么一点波浪的感觉):

微信小程序使用二次贝塞尔曲线画波浪

界面代码为(index.wXMl):

<view class="page-body">
 <view class="page-body-wrapper">
  <canvas canvas-id="myCanvas3" class="canvas3"></canvas>
 </view>
</view>
JS代码为(index.js):
Page({
 onReady: function() {
  this.position = {
    x: 150,
    y: 150,
    vx: 2,
    vy: 2
   },
   this.obj = {
    offset: 0,
    baseLine: 40,
    direction: 1,
    waveDirection: 1
   },
   // var offset = 5
   this.drawQuadraticCurve3()
  this.interval = setInterval(this.drawQuadraticCurve3, 1)
  console.log(">>>>>>>>>" + this.obj.offset)
 },
 /**
  * 画大波浪
  */
 drawQuadraticCurve3: function() {
  var obj = this.obj
  var startX = 20,
   itemWidth = 100,
   offset = obj.offset,
   baseLine = obj.baseLine,
   waveHeight = 10,
   direction = obj.direction,
   waveDirection = obj.waveDirection
  
  const ctx = wx.createCanvasContext('myCanvas3')
 
  function getWaveHeigh(i) {
   if (i % 2 == 0) {
    // return baseLine + waveHeight
   }
   return baseLine - waveHeight
  }
  ctx.beginPath()
  ctx.moveTo(-itemWidth * 6, baseLine)
  ctx.setFillStyle('#4BF6EE')
  for (var i = -6; i < 5; i++) {
   startX = i * itemWidth;
   var currentX = startX + (itemWidth / 2) + offset
   var currentY = getWaveHeigh(i)
   var currentEndX = startX + itemWidth + offset
   ctx.quadraticCurveTo(currentEndX - 10,
    currentY, currentEndX, baseLine)
   ctx.stroke()
  }
  //填充海水
  ctx.lineto(0, 2000)
  ctx.setFillStyle('#4BF6EE')
  ctx.fill()
  
  ctx.draw()
  
  
  if (obj.waveDirection == 1) {
   obj.offset = obj.offset + 1
  } else if (obj.waveDirection == -1) {
   obj.offset = obj.offset - 1
  }
  if (obj.offset == 400) {
   obj.offset = 0
  }
  if (obj.offset == 50 || obj.offset == 1) {
   // obj.waveDirection = obj.waveDirection * -1
  }
  
  
  // if (direction == 1) {
  //  obj.baseLine = obj.baseLine + 1
  // } else if (direction == -1) {
  //  obj.baseLine = obj.baseLine - 1
  // }
  if (obj.baseLine >= 50 || obj.baseLine <= 40) {
   console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<")
   //obj.direction = (obj.direction * -1)
  }
 },
 onUnload: function() {
  clearInterval(this.interval)
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序使用二次贝塞尔曲线画波浪全部内容,希望文章能够帮你解决微信小程序使用二次贝塞尔曲线画波浪所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。