Você precisa implementar a própria função de Bézier em JS para encontrar um ponto no segmento da curva Bézier q vc quer.
A parte mais importante pra vc é a própria implementação da curva Bézier. Vc pode usa-la para criar uma lista de segmentos e depois criar os boundaries com a informação coletada dos seguimentos.
Existe uma constante chamada limit
que define a quantidade de pontos que quero da curva, menos pontos significa menos precisão, porém mais rápido. Ai fica ao seu critério a melhor forma de obter esses pontos.
Abaixo o demo completo que vc pode rodar em um REPL Svelte ou extrair as partes relevantes pra seu código (já que Svelte é praticamente agnóstico).
// App.svelte
<script>
import { onMount } from "svelte";
import PointModifier from "./PointModifier.svelte";
let canvas;
let ctx;
let cp1x = 150;
let cp1y = 25;
let cp2x = 400;
let cp2y = 200;
let startX = 0;
let startY = 0;
const endX = 300;
const endY = 300;
const radius = 3;
let step = 0;
let limit = 500;
let info = "{}"
const updateCurve = (ctx, x1, y1, x2, y2, x, y, radius) => {
if (!ctx) {
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.strokeStyle = "#000000";
ctx.bezierCurveTo(x1, y1, x2, y2, x, y);
ctx.stroke();
ctx.closePath();
// point 1 (x1, y1)
ctx.fillStyle = "#ff0000";
ctx.strokeStyle = "#ff0000";
ctx.font = "13px monospace";
ctx.beginPath();
ctx.arc(x1, y1, radius, 0, 2 * Math.PI);
ctx.strokeText(`point1 ( ${x1}, ${y1} )`, x1 + 10, y1 + 10);
ctx.closePath();
ctx.fill();
// point 2 (x2, y2)
ctx.fillStyle = "#ff0000";
ctx.strokeStyle = "#ff0000";
ctx.font = "13px monospace";
ctx.beginPath();
ctx.arc(x2, y2, radius, 0, 2 * Math.PI);
ctx.strokeText(`point2 ( ${x2}, ${y2} )`, x2 + 10, y2 + 10);
ctx.closePath();
ctx.fill();
// point in bezier
const angle = (step % limit) / limit;
const { x: px, y: py } = getBezierXY(angle, startX, startY, cp1x, cp1y, cp2x, cp2y, endX, endY)
const rx = Math.trunc(px)
const ry = Math.trunc(py)
ctx.fillStyle = "#9e33ff";
ctx.strokeStyle = "#9e33ff";
ctx.font = "13px monospace";
ctx.beginPath();
ctx.arc(px, py, radius, 0, 2 * Math.PI);
ctx.strokeText(`bezierPoint ( ${rx}, ${ry} )`, px + 10, py + 10);
ctx.closePath();
ctx.fill();
info = `{
x: ${Math.round(rx)},
y: ${Math.round(ry)},
step: ${step}
}`
};
// Bezier curve implementation (source: http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html)
const getBezierXY = (t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) => ({
x:
Math.pow(1 - t, 3) * sx +
3 * t * Math.pow(1 - t, 2) * cp1x +
3 * t * t * (1 - t) * cp2x +
t * t * t * ex,
y:
Math.pow(1 - t, 3) * sy +
3 * t * Math.pow(1 - t, 2) * cp1y +
3 * t * t * (1 - t) * cp2y +
t * t * t * ey,
});
const updatePointInPath = () => {
updateCurve(ctx, cp1x, cp1y, cp2x, cp2y, endX, endY, radius);
step += 1;
requestAnimationFrame(updatePointInPath);
};
onMount(() => {
ctx = canvas.getContext("2d");
updateCurve(ctx, cp1x, cp1y, cp2x, cp2y, endX, endY);
requestAnimationFrame(updatePointInPath);
});
</script>
<main>
<div>
<p>info</p>
<code>
{info}
</code>
</div>
<canvas bind:this={canvas} width="800" height="500" />
<form>
<div>
<h4>Control Point 1</h4>
<PointModifier name="cp1x" bind:value={cp1x} />
<PointModifier name="cpyx" bind:value={cp1y} />
</div>
<div>
<h4>Control Point 2</h4>
<PointModifier name="cp2x" bind:value={cp2x} />
<PointModifier name="cp2x" bind:value={cp2y} />
</div>
</form>
</main>
<style>
canvas {
border: 1px solid #666;
background-color: #fff;
}
form {
display: flex;
align-items: center;
justify-content: center;
}
</style>
// PointModifier.svelte
<script>
export let name = "axis"
export let value = 0
</script>
<label for={name}>
<span>{name}: {value}</span>
<input type="range" min="0" max="750" bind:value />
</label>
<style>
label {
display: flex;
flex-direction: column;
font-family: monospace;
justify-content: center;
padding: 0.8rem;
border: 1px solid #eaeaea;
margin: 0.2rem
}
input {
border: none;
height: 50px;
}
</style>