Clip

ClipRRect creates a rounded-rectangular clip. ClipOval creates an oval clip.

Usage

ClipRRect:

Rounded

ClipOval:

Circle

<template>
  <Column :gap="20">
    <Text>ClipRRect:</Text>
    <ClipRRect :border-radius="BorderRadius.circular(20)">
      <Container :width="100" :height="100" color="orange">
        <Center><Text>Rounded</Text></Center>
      </Container>
    </ClipRRect>

    <Text>ClipOval:</Text>
    <ClipOval>
      <Container :width="100" :height="100" color="purple">
        <Center><Text>Circle</Text></Center>
      </Container>
    </ClipOval>
  </Column>
</template>

<script setup lang="ts">
import { Column, Text, Container, Center, ClipRRect, ClipOval, BorderRadius } from "fluekit";
</script>

ClipRRect API

Props

Name	Type	Default	Description
borderRadius	BorderRadius	-	The border radius of the rounded rectangle.
clipBehavior	string	'antiAlias'	Controls how to clip. Options: 'none', 'hardEdge', 'antiAlias', 'antiAliasWithSaveLayer'.

ClipOval API

Props

Name	Type	Default	Description
clipBehavior	string	'antiAlias'	Controls how to clip. Options: 'none', 'hardEdge', 'antiAlias', 'antiAliasWithSaveLayer'.