BezierCurve

使用

<amap>
  <amap-bezier-curve :path="[...]" />
</amap>

Source Code

Props

属性名	类型	备注
path	number[][] | number[][][]	支持.sync
zIndex	number
bubble	boolean
cursor	string
strokeColor	string
strokeOpacity	number
strokeWeight	number
isOutline	boolean
outlineColor	string
draggable	boolean
strokeStyle	boolean
strokeDasyarray	number[]
lineJoin	string
lineCap	string
geodesic	boolean
showDir	boolean
dirColor	string
dirImg	Image | Canvas
visible	boolean
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

amap-vue 独有 Props

属性名	类型	备注
editable	boolean	为true时会开启BezierCurveEditor，并会触发path属性的.sync
editorOpts	object	可选，用于定制BezireCurveEditor参数，仅支持单次绑定

Events

事件名	备注
click
dblclick
rightclick
mousemove
mouseover
mouseout
mousedown
mouseup
dragstart
dragging
dragend
moving
moveend
movealong
touchstart
touchmove
touchend

Example

<template>
  <demo-view>
    <template v-slot:control>
      <a-form-item label="editable">
        <a-checkbox v-model="editable" />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-bezier-curve
        :path.sync="path"
        :stroke-color="stroke"
        :stroke-weight="6"
        :editable="editable"
        show-dir
        dir-color="#f00"
      />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      editable: false,
      stroke: '#409EFF',
      path: [
        //每个弧线段有两种描述方式
        [116.37, 39.91], //起点
        //第一段弧线
        [116.380298, 39.907771, 116.38, 39.9], //控制点，途经点
        //第二段弧线
        [116.385298, 39.907771, 116.4, 39.9], //控制点，途经点//弧线段有两种描述方式1
        //第三段弧线
        [
          //弧线段有两种描述方式2
          [116.392872, 39.887391], //控制点
          [116.40772, 39.909252], //控制点
          [116.41, 39.89], //途经点
        ],
        //第四段弧线
        [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273],
        //控制点，控制点，途经点，每段最多两个控制点
      ],
    };
  },
};
</script>