Bezier Curve

The bezier shape function arranges elements in a bezier curve. It is very similar configuration-wise to a regular line, adding two control points c1 and c2 for adjusting the curve.

import { ref } from 'vue';

const config = ref({
  shape: 'bezier',
  shapeParameters: {
    start: {
      x: "10%",
      y: "10%"
    },
    end: {
      x: "90%",
      y: "90%"
    },
    c1: {
      x: "80%",
      y: "30%"
    },
    c2: {
      x: "20%",
      y: "70%"
    },
  }
});