圆形

基础示例

12345678910111213141516171819202122232425262728

<template>
  <canvas ref="canvasRef" />
</template>

<script lang="ts" setup>
import { Stage, Circle } from '@cat-kit/canvas'
import { onMounted, shallowRef } from 'vue'

const canvasRef = shallowRef<HTMLElement>()

const circle = new Circle({
  x: 50,
  y: 50,
  r: 25,
  fill: '#4dcb71'
})

const stage = new Stage({
  height: 100,
  width: 600,
  graphs: [circle]
})

onMounted(() => {
  canvasRef.value && stage.mount(canvasRef.value)
})
</script>

扇形

扇形需要在配置中填写开始角度和结束角度的值(单位为度)。

123456789101112131415161718192021222324252627282930

<template>
  <canvas ref="canvasRef" />
</template>

<script lang="ts" setup>
import { Stage, Circle } from '@cat-kit/canvas'
import { onMounted, shallowRef } from 'vue'

const canvasRef = shallowRef<HTMLElement>()

const circle = new Circle({
  x: 50,
  y: 50,
  r: 25,
  startAngle: 90,
  endAngle: 360,
  fill: '#4dcb71'
})

const stage = new Stage({
  height: 100,
  width: 600,
  graphs: [circle]
})

onMounted(() => {
  canvasRef.value && stage.mount(canvasRef.value)
})
</script>

椭圆

椭圆需要指定两个圆角参数。

1234567891011121314151617181920212223242526272829

<template>
  <canvas ref="canvasRef" />
</template>

<script lang="ts" setup>
import { Stage, Circle } from '@cat-kit/canvas'
import { onMounted, shallowRef } from 'vue'

const canvasRef = shallowRef<HTMLElement>()

const ellipse = new Circle({
  x: 50,
  y: 50,
  r: [25, 50],
  rotation: 90,
  fill: '#4dcb71'
})

const stage = new Stage({
  height: 100,
  width: 600,
  graphs: [ellipse]
})

onMounted(() => {
  canvasRef.value && stage.mount(canvasRef.value)
})
</script>

圆环

12345678910111213141516171819202122232425262728293031

<template>
  <canvas ref="canvasRef" />
</template>

<script lang="ts" setup>
import { Stage, Circle } from '@cat-kit/canvas'
import { onMounted, shallowRef } from 'vue'

const canvasRef = shallowRef<HTMLElement>()

const circle = new Circle({
  x: 50,
  y: 50,
  r: 25,
  innerRadius: 20,
  startAngle: -90,
  endAngle: 90,
  fill: '#4dcb71'
})

const stage = new Stage({
  height: 100,
  width: 600,
  graphs: [circle]
})

onMounted(() => {
  canvasRef.value && stage.mount(canvasRef.value)
})
</script>