微信小程序使用二次贝塞尔曲线画波浪
这两周做一个新的项目,人员比较紧张,除了需求和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)
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
Spring Cloud Stream同一通道根据消息内容分发不同的消费逻辑
应用场景 有的时候,我们对于同一通道中的消息处理,会通过判断头信息或者消息内容来做一些差异化处理,比如:可能在消息头信息中带入消息版本号,然后通过if判断来执行不同的处理逻辑,其代码结构可能是这样的: @StreamListener(value = TestTopic.INPUT) public void receiveV1(String payload, @Header("version") String version) { if("1.0".equals(version)) { // Version 1.0 } if("2.0".equals(version)) { // Version 2.0 } } 那么当消息处理逻辑复杂的时候,这段逻辑就会变得特别复杂。针对这个问题,在@StreamListener注解中提供了一个不错的属性condition,可以用来优化这样的处理结构。 动手试试 下面通过编写一个简单的例子来具体体会一下这个属性的用法: @EnableBinding(TestApplication.TestTopic.class) @SpringBootApplicati...
-
下一篇
美团酒旅起源数据治理平台的建设与实践
背景 作为一家高度数字化和技术驱动的公司,美团非常重视数据价值的挖掘。在公司日常运行中,通过各种数据分析挖掘手段,为公司发展决策和业务开展提供数据支持。经过多年的发展,美团酒旅内部形成了一套完整的解决方案,核心由数据仓库+各种数据平台的方式实现。其中数据仓库整合各业务线的数据,消灭数据孤岛;各种数据平台拥有不同的特色和定位,例如:自助报表平台、专业数据分析平台、CRM数据平台、各业务方向绩效考核平台等,满足各类数据分析挖掘需求。早期数据仓库与各种数据平台的体系架构如图1所示: 图1 酒旅早期各数据平台和数据仓库体系架构图 图1所示的体系架构,在业务需求的满足上非常高效,但在长时间的使用过程中,也产生了如下一些问题: 各数据平台或平台内不同模块的指标定义不一致。 各数据平台或平台内不同模块指标计算口径不一致。 各数据平台或平台内不同模块指标数据来源不一致。 上述这些问题总结归纳起来,就是指标数据不一致的问题,最终带来的后果是指标数据可信度底,严重影响分析决策。通过后续追踪分析,上述问题的由来,主要是不同业务线的数据分析人员、数据开发人员,以及不同的产品之间,缺乏有效的沟通,也没有一个统一...
相关文章
文章评论
共有0条评论来说两句吧...