webview/src/modules/camera/ShadeFace.vue

<script setup lang="ts">
import { SVGPathData, SVGPathDataTransformer } from 'svg-pathdata';


const Shade: SVGPathData[] = [
  'M0 183A136 183 0 11272 183 136 183 0 110 183Z',
].map(d => new SVGPathData(d));

const {
  translateX = 0, translateY = 0,
  scaleX = 1, scaleY = 1,
} = defineProps<{
  translateX?: number; translateY?: number;
  scaleX?: number; scaleY?: number
}>();

const paths = ref<string[]>([]);

watchEffect(() => {
  paths.value = Shade.map(data => data
    .transform(SVGPathDataTransformer.TRANSLATE(translateX, translateY))
    .transform(SVGPathDataTransformer.SCALE(scaleX, scaleY))
    .encode(),
  );
});
</script>
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 366">
    <clipPath id="shade">
      <path v-for="(d,i) in paths" :id="'outline-'+i" stroke="#fefefe" stroke-width="2" fill="none" :d="d" />
    </clipPath>
    <path
      id="face"
      stroke="#fefefe"
      stroke-width="2"
      fill="none"
      d="M0 183A136 183 0 11272 183 136 183 0 110 183Z"
    />
  </svg>
</template>
<style scoped lang="scss">
svg { opacity: 0.85; }
</style>