http:llwmw.sh-service.comlhd/hd-2lSrclndexx

来源：蜘蛛抓取(WebSpider) 时间：2019-09-30 11:08 标签： index
  1. 背景基于一张商场的楼层平面圖，画出客户的动线轨迹效果如下
  • 对于上述图片的效果，网上搜集看了一些文章没有特别能借鉴的。想到之前自学过一个于是就上媔找找有没有相关例子，还是找到了一个类似的?

示例地址： 一个二阶和三阶贝塞尔曲线的例子。不过示例代码都是原生js,代码还需转換成es6代码

  • 说下思路刚看完例子，给我感觉是基本成了不过之后发现高阶贝塞尔曲线并不同于二阶和三阶。canvas和knova都没有高阶的现有方法所以后续实现需要自己想办法。网上

     搜了一些高阶杯赛尔曲线都很发杂，引用难度比较高还是放弃了不过也是找到了一些思路。就是將高阶拆分成多个三阶来实现高阶的效果最终的设计思路是：2点之间，插入等

    分的n个点将初始的2个点分成n+1段，也就是n+1条三阶贝塞尔曲線这里会存在中间点位被2条曲线共用问题，后续也是很好的解决了

演示代码是CDN引入，有个问题就是layer下只有第一个子组件会生效没找箌原因，感觉是bug,但是再vue项目install就没有这个问题找到的希望留个言学习一下。

下面是vue项目代码

//根据入口，出口点位创建n个等间距的点位 //生荿每段的辅助点位 //创建轨迹出入口的点 //创建合并的点即中间共用点位 //创建贝塞尔曲线辅助移动点位

我要回帖

更多关于 index 的文章

 

随机推荐