es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pivotar el texto alrededor de un pivote.

06 Jun, 2023 Programación

Solo estoy tratando de rotar el texto con el centro del círculo como pivote. No está claro cómo funciona rotate(grados, cx, cy) (https://svgjs.dev/docs/3.0/manipulating/#rotate).

var draw = SVG().addTo('body').size(300, 130)
var g = draw.group()
var rect = g.rect(200, 100).fill('#f06').move(20, 20)
var circlePos = [50,50]
var circleSize = 50;
g.circle(circleSize).fill('#000').move(...circlePos)
var labelPos = [50,50]
var fontSize = 14
g.text("TEST").addClass("label").font({size: fontSize}).move(circlePos[0] + 5, circlePos[1]).transform({rotate:-45})

https://jsfiddle.net/alfredopacino/tLejr1kn/17/

Resultado deseado:
enter image description here

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El método rotate() en SVG.js te permite rotar un elemento alrededor de un punto dado. Los parámetros para el método rotate() son los siguientes:

    • degrees: el ángulo de rotación, en grados. Los valores positivos indican rotación en sentido horario, mientras que los valores negativos indican rotación en sentido antihorario.
    • cx: la coordenada x del punto central de rotación.
    • cy: la coordenada y del punto central de rotación.

    En el código proporcionado, el elemento text está siendo rotado -45 grados usando transform({rotate:-45}). Sin embargo, esto no gira alrededor del centro del círculo como se pretendía.

    Para girar el texto alrededor del centro del círculo, necesitamos calcular el punto central del círculo y pasar esos valores como parámetros cx y cy al método rotate().

    Aquí está el código actualizado:

    var draw = SVG().addTo('body').size(300, 130);
var g = draw.group();
var rect = g.rect(200, 100).fill('#f06').move(20, 20);
var circlePos = [50, 50];
var circleSize = 50;
g.circle(circleSize).fill('#000').move(...circlePos);

var label = g.text('TEST')
    .addClass('label')
    .font({size: 14})
    .move(circlePos[0] + 5, circlePos[1]);

// Calcular el punto central del círculo
var cx = circlePos[0] + circleSize / 2;
var cy = circlePos[1] + circleSize / 2;

label.rotate(-45, cx, cy); // Rotar alrededor del centro del círculo

    El valor cx se calcula sumando la mitad del tamaño del círculo a la coordenada x de su esquina superior izquierda. El valor cy se calcula sumando la mitad del tamaño del círculo a la coordenada y de su esquina superior izquierda.

    Luego pasamos estos valores calculados al método rotate() para rotar el elemento de texto alrededor del centro del círculo.

    Esto debería resultar en que el texto se gire alrededor del centro del círculo, como se muestra en la imagen del resultado deseado.

Comments are closed.