Pen

像绘画一样，快速画出不同样式的路径组合。

用法

0px x 0px

App.vue

Import Map

xxxxxxxxxx

45

 

1

<script setup lang="ts">

2

import { Pen } from 'leafer-ui'

3

import { LeaferApp } from 'leafer-vue'

4

import { ref } from 'vue'

5

​

6

const penRef = ref<Pen>()

7

​

8

function handleDraw() {

9

  penRef.value!.setStyle({

10

    fill: {

11

      type: 'radial',

12

      stops: [

13

        { offset: 0, color: '#FF4B4B' },

14

        { offset: 1, color: '#FEB027' },

15

      ],

16

    },

17

  })

18

  penRef.value!.roundRect(0, 0, 100, 100, 30)

19

​

20

  penRef.value!.setStyle({ y: -5, fill: 'white' })

21

  penRef.value!

22

    .moveTo(40, 30)

23

    .bezierCurveTo(70, 30, 90, 60, 63, 80)

24

    .quadraticCurveTo(50, 88, 40, 80)

25

    .bezierCurveTo(10, 60, 50, 40, 40, 30)

26

}

Show Error

详情查看Path |🌿 Leafer UI。

事件请查看事件处理 |🌿 Leafer Vue