8

Preciso descobrir o tamanho renderizado de uma curva no canvas 2d

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

com esse código, por exemplo

// pontos de controle
var cp1x = 200,
    cp1y = 150,
    cp2x = 260,
    cp2y = 10;

var x = 0,
    y = 0;

// calculação
var curveWidth = cp1x > x ? cp1x - x : x - cp1x,
    curveHeight = cp1y > y ? cp1y - y : y - cp1y;

Porém, o ponto cp2 pode alongar mais a curva se ultrapassar um ponto inicial ou final (isso é que acontece nesse código, cp1x = 200, cp2x = 260). Por exemplo, vamos supor que o ponto cp2 é marcado com a bolinha vermelha nessa imagem e que sua coordenada x é maior que a coordenada x de cp1, qual aparenta ser o ponto final da curva:

ponto cp2

Sendo assim, como posso considerar a largura do ponto cp2 no valor de curveWidth e no valor de curveHeight para ser exato?

2 Respostas 2

0

Camarada achei sua pergunta muito interessante, nunca tinha trabalhado com bezier do canvas e fiz um teste pra brincar.

Entendi da sua pergunta que você quer saber a distância do lado esquerdo até o ponto da curva mais à direita, sendo essa a largura da curva.

Gostaria de poder dizer algo do tipo curveWidth = cpx1 + ( (cpx2 - cpx1)/2 ) mas na realidade é que nos meus testes não consegui descobrir uma relação matemática que se mantivesse constante, então essa relação muda muito de acordo com os valores das variáveis a todo instante.

Mas reparei que na sua pergunta você não está vendo no gráfico os 2 pontos de controle da bezier e acredito que isso faça toda diferença pra melhorar o seu entendimento de como você pode encontrar essa distância.

Apenas como ferramenta pra debug, fiz um código que talvez possa te auxiliar nesse entendimento e ajudar a encontrar uma resposta adequada, segue abaixo:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<style>
		body { margin:0; padding:0;}
		#dot1 {background-color:red; position:absolute; z-index:999;}
		#dot2 {background-color:blue; position:absolute; z-index:998;}	
		#dot1,#dot2 {width:8px; height:8px;  border-radius: 8px;}
	</style>

	<!-- https://en.wikipedia.org/wiki/B%C3%A9zier_curve -->
</head>
<body>

	<span id="dot1"></span>
	<span id="dot2"></span>
	
	<canvas id="meucanvas" width="500" height="400" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	cp1x = 150;
	cp1y = 25;

	cp2x = 400;
	cp2y = 200;

	x = 300;
	y = 300;

	function cria_grafico(cp1x, cp1y, cp2x, cp2y, x, y)
	{
		var c = document.getElementById("meucanvas");
		var ctx = c.getContext("2d");
		
		ctx.clearRect(0, 0, 500, 400);		
		
			ctx.beginPath();
			ctx.moveTo(0, 0);
			
			ctx.strokeStyle = "#000000";
			ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
			ctx.stroke();
			
			ctx.strokeStyle = "#ff0000";
			ctx.strokeText("cp1 ( "+cp1x+", "+cp1y+" )", cp1x+10, cp1y+10);
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(cp1x,cp1y);
			ctx.stroke();				

	
			ctx.strokeStyle = "#0000ff";
			ctx.strokeText("cp2 ( "+cp2x+", "+cp2y+" )", cp2x+10, cp2y+10);	
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(cp2x,cp2y);
			ctx.stroke();				

			
		document.getElementById("dot1").style.left=cp1x+'px';
		document.getElementById("dot1").style.top=cp1y+'px';	
		

		document.getElementById("dot2").style.left=cp2x+'px';
		document.getElementById("dot2").style.top=cp2y+'px';	
	}	
	
	window.onload=function()
	{
	
		document.getElementById("cp1x").value = cp1x;
		document.getElementById("cp1y").value = cp1y;

		document.getElementById("cp2x").value = cp2x;
		document.getElementById("cp2y").value = cp2y;

		document.getElementById("x").value = x;
		document.getElementById("y").value = y;	

		cria_grafico(cp1x, cp1y, cp2x, cp2y, x, y);		
	
	}
	

	function redesenhar()
	{
		cp1x = parseInt( document.getElementById("cp1x").value );
		cp1y = parseInt( document.getElementById("cp1y").value );	

		cp2x = parseInt( document.getElementById("cp2x").value );
		cp2y = parseInt( document.getElementById("cp2y").value );	
		
		x = parseInt( document.getElementById("x").value );
		y = parseInt( document.getElementById("y").value );		

		cria_grafico(cp1x, cp1y, cp2x, cp2y, x, y);		
	}
	</script>	

	
	<br clear="both">
	
	cp1x: <input type="text" id="cp1x">
	cp1y: <input type="text" id="cp1y">

	<br><br>

	cp2x: <input type="text" id="cp2x">
	cp2y: <input type="text" id="cp2y">

	<br><br>
	
	x: <input type="text" id="x">
	y: <input type="text" id="y">	
	
	<input type="button" value="Redesenhar" onclick="redesenhar()">


</body>
</html>

Se essa resposta te ajudar em alguma coisa dê um +1, mas não marque minha resposta como aceita porque eu não consegui respondê-la. Gostaria que você publicasse a resposta do seu problema quando conseguir resolvê-lo.

Boa sorte e abraços, Qualquer coisa vamos trocando ideia aqui na pergunta.

3
  • Parece ser útil! Infelizmente meu notebook não está ligando, mas vou testar seu código no celular, vlw pela atenção
    – user37626
    Commented 19/01/2017 às 17:26
  • 1
    Não sei se no aplicativo do celular aparece o botão de executar o código, mas indo pelo Chrome do meu celular não apareceu. De qualquer forma boa sorte com o projeto e com o notebook. De repente é só bateria descarregada. Commented 19/01/2017 às 17:32
  • 1
    Eu consegui executar o código no jsfiddle.net, só foi um pouco tricky para copiá-lo :v. Hum..., creio que a bateria do notebook esteja danificada. Quando eu puder voltar à mexer nele usarei seu utilitário para ver as diferenças entre os pontos de controle!
    – user37626
    Commented 19/01/2017 às 17:48
0

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>

Você deve fazer log-in para responder a esta pergunta.