leafer-vue

Appearance

lfLine 线条 ​

绘制横线、斜线、竖线， 通过 width 与 rotation 定义直线。

详情查看Line。

用法 ​

vue
<script setup lang="ts">
import { lfLeafer, lfLine } from 'leafer-vue'
</script>

<template>
  <lfLeafer :width="100" :height="100" fill="#fff">
    <lfLine
      :width="100" :stroke-width="5"
      :rotation="45" stroke="#4dcb71"
    />
  </lfLeafer>
</template>
<script setup lang="ts">
import { lfLeafer, lfLine } from 'leafer-vue'
</script>

<template>
  <lfLeafer :width="100" :height="100" fill="#fff">
    <lfLine
      :width="100" :stroke-width="5"
      :rotation="45" stroke="#4dcb71"
    />
  </lfLeafer>
</template>

核心属性 ​

名称类型默认值说明
xnumber——x 轴起点
ynumber——y 轴起点
widthnumber——线的长度
strokeWidthnumber1线的宽度
strokestring——线的颜色
rotationnumber——旋转角度， 取值范围: -180 ～ 180
toPoint{x:number, y:number}——画到某一点 setter（相对于元素起点的坐标）， 自动换算出 width 与 rotation

事件 ​

名称说明