矩形

基础示例

123456789101112131415161718192021222324252627282930

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

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

const canvasRef = shallowRef<HTMLElement>()

const rect = new Rect({
  w: 100,
  h: 100,
  x: 0,
  y: 0,
  borderColor: 'rgb(255, 0, 0)',
  borderWidth: 40
})

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

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

圆角

12345678910111213141516171819202122232425262728293031323334353637383940414243

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

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

const canvasRef = shallowRef<HTMLElement>()

const rect1 = new Rect({
  w: 100,
  h: 100,
  x: 0,
  y: 0,
  radius: 8,
  borderWidth: 8,
  borderColor: '#ccc',
  fill: '#f00',
})

const rect2 = new Rect({
  w: 150,
  h: 100,
  x: 120,
  y: 0,
  radius: [50, 0, 0, 50],
  borderColor: 'blue',
  borderWidth: 3,
  fill: 'green'
})

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

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

填充

1234567891011121314151617181920212223242526272829

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

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

const canvasRef = shallowRef<HTMLElement>()

const rect1 = new Rect({
  w: 100,
  h: 100,
  x: 0,
  y: 0,
  fill: '#f00'
})

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

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