三次贝塞尔加圆弧组成的飞线

效果图

10. BesselArcFlyline 组件 - 图1

飞线使用

引入

  1. import Vue from 'vue'
  2. import {BesselArcFlyline} from 'special-ui'
  3. Vue.use(BesselArcFlyline)

使用

  1. <template>
  2.   <div class="container">
  3.     <bessel-arc-flyline :width="1820" :height="900" :dataset="data" :config="config"></bessel-arc-flyline>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'App',
  10.   data () {
  11.     return {
  12.       data: [
  13.           {
  14.               from: { x: 1700, y: 300},
  15.               to: { x: 1500, y: 500},
  16.               end: { x: 1000, y: 300},
  17.               r: 100,
  18.               firstControlFactor: -0.5,
  19.               secondControlFactor: 0.1,
  20.               speedBezierFactor: 8000,
  21.               speedArcFactor: 200,
  22.               startArcAngle: -Math.PI / 2,
  23.               endArcAngle: Math.PI * 1.8,
  24.               counterclockwise: true
  25.           },
  26.           {
  27.               from: { x: 100, y: 300},
  28.               to: { x: 600, y: 500},
  29.               end: { x: 800, y: 300},
  30.               r: 100,
  31.               firstControlFactor: -0.5,
  32.               secondControlFactor: 0.1,
  33.               speedBezierFactor: 8000,
  34.               speedArcFactor: 200,
  35.               startArcAngle: -Math.PI / 2,
  36.               endArcAngle: Math.PI * 3 / 2.6
  37.           },
  38.           {
  39.               from: { x: 1700, y: 700},
  40.               to: { x: 1500, y: 500},
  41.               end: { x: 1000, y: 790},
  42.               r: 100,
  43.               firstControlFactor: 0.5,
  44.               secondControlFactor: -0.1,
  45.               speedBezierFactor: 8000,
  46.               speedArcFactor: 200,
  47.               startArcAngle: -Math.PI * 3 / 2,
  48.               endArcAngle: Math.PI / 6,
  49.               arcDirction: 'top'
  50.           },
  51.           {
  52.               from: { x: 100, y: 700},
  53.               to: { x: 600, y: 500},
  54.               end: { x: 800, y: 790},
  55.               r: 100,
  56.               firstControlFactor: 0.5,
  57.               secondControlFactor: -0.1,
  58.               speedBezierFactor: 8000,
  59.               speedArcFactor: 200,
  60.               startArcAngle: -Math.PI * 3 / 2,
  61.               endArcAngle: Math.PI * 0.9,
  62.               counterclockwise: true,
  63.               arcDirction: 'top'
  64.           },
  65.       ],
  66.       config: {
  67.           //marker点半径
  68.           // markerRadius: 2,
  69.           //marker点颜色,为空或null则默认取线条颜色
  70.           // markerColor: null,
  71.           // 线条类型 solid、dashed; 有lineDash并且设值则dashed
  72.           lineDash: [5, 4],
  73.           //线条宽度
  74.           lineWidth: 1,
  75.           //线条颜色
  76.           colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
  77.           //移动点半径
  78.           moveRadius: 2,
  79.           //移动点颜色
  80.           fillColor: '#fff',
  81.           //移动点阴影颜色
  82.           shadowColor: '#fff',
  83.           //移动点阴影大小
  84.           shadowBlur: 1
  85.       }
  86.     }
  87.   }
  88. }
  89. </script>
  91. <style>
  92. .container {
  93.   height: 100%;
  94. }
  95. </style>

组件参数

属性 说明 默认值
width 画布宽度 0
height 画布高度 0
dataset 飞线数组 []
config 飞线参数配置 {}

config: 数组

属性 说明 默认值
markerRadius marker点半径 3, 为0则没有圆点显示
markerColor marker颜色 null, 不设置则和线条颜色一致
lineWidth 线条宽度 1
lineDash 虚线设置 [], 为空数组则显示实线
colors 飞线颜色 []
moveRadius 移动点半径 3
fillColor 移动点颜色 ‘#fff’
shadowColor 移动点阴影颜色 ‘#fff’
shadowColor 移动点阴影颜色 ‘#fff’
shadowBlur 移动点阴影大小 5

dataset对象参数说明：

属性 说明
from 三次贝塞尔起点坐标
to 三次贝塞尔中间点坐标
end 三次贝塞尔终点点坐标
r 连接贝塞尔的弧线半径
firstControlFactor 三次贝塞尔第一个曲线系数
secondControlFactor 三次贝塞尔第二个曲线系数
speedBezierFactor 贝塞尔动画系数，越大越慢
speedArcFactor 圆弧动画系数，越大越慢
startArcAngle 开始弧度
endArcAngle 结束弧度
counterclockwise 是否逆时针画弧度
arcDirction 圆弧朝向，默认朝下