javascript - library - paper js examples

Aplicación de esquinas redondeadas a caminos/polígonos

Question

Estoy recopilando información para un proyecto que debe comenzar en unas pocas semanas. Este proyecto contiene una herramienta de dibujo basada en el navegador donde los usuarios pueden agregar formas predefinidas o formar figuras. Las formas deben ser seleccionables, libremente escalables y giratorias con una herramienta de transformación similar a Illustrator (identificadores). Las formas predefinidas que tenemos en mente son: rectángulos, elipses, medias elipses y triángulos (isósceles).

Hasta ahora todo bien, para lograr esto estaba pensando en RaphaelJS o FabricJS pero ... Cada forma (polígono / camino) debe trazarse con un cierto radio de giro. Y el radio de esquina debe mantenerse al escalar, por lo que no se produce distorsión. El usuario puede especificar el redondeo por entrada.

Hay algunos obstáculos / preguntas:

• ¿Hay alguna fórmula matemática uniforme para aplicar un radio de giro a las formas que mencioné? ¿O debe tratarse cada forma como un mini proyecto en sí mismo? Quiero devolverlo como un camino o poli, por lo que se puede dibujar con SVG o lienzo.
• Cada operación de escala o rotación, al arrastrar los manejadores de transformación, dará como resultado cálculos (masivos) para recuperar una forma actualizada, creo. Los rectángulos son los más fáciles de lograr y, salvo las elipsis, todas las otras formas serán mucho más difíciles de calcular. ¿Hay alguna forma de acelerar el proceso?

Encontré un sitio donde los usuarios pueden dibujar diagramas de flujo y aplicar un cornerradius en casi todas las formas que se ofrecen. Funciona tan bien, no sé cómo lo hicieron. Enlace: https://www.lucidchart.com/ (botón de probar)

Por ahora, estoy un poco despistado, supongo que mediocre en matemáticas. Tal vez alguien me puede empujar en la dirección correcta y compartir algunas experiencias?

Gracias por adelantado.

Por cierto. El rendimiento es clave en este proyecto. La salida del dibujo debe ser del formato SVG.

Answer 1

Terminé teniendo un problema similar y no pude encontrar una solución simple. Terminé escribiendo una función de redondeo de esquina bastante genérica basada en la operación de Adobe Illustrator. Utiliza curvas de Bezier en lugar de arcos, pero creo que el resultado es bastante decente.

Admite el redondeo con un radio dado en el espacio de coordenadas de la imagen SVG o como una fracción de la distancia entre una esquina y sus vecinos.

Para usar esto, incluye rounding.js en tu proyecto y llama a la función:

roundPathCorners(pathString, radius, useFractionalRadius)

El código y algunas rutas de prueba están aquí: http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview

Así es como se representan los ejemplos de Plnkr:

Answer 2

A pesar de que esta pregunta está por algún tiempo, algunos pueden pasar por aquí y probar esta solución:

var BORDER_RADIUS = 20;

function roundedPath( /* x1, y1, x2, y2, ..., xN, yN */ ){
    context.beginPath();
    if (!arguments.length) return;

    //compute the middle of the first line as start-stop-point:
    var deltaY = (arguments[3] - arguments[1]);
    var deltaX = (arguments[2] - arguments[0]);
    var xPerY = deltaY / deltaX;
    var startX = arguments[0] + deltaX / 2;
    var startY = arguments[1] + xPerY * deltaX / 2;

    //walk around using arcTo:
    context.moveTo(startX, startY);
    var x1, y1, x2, y2;
    x2 = arguments[2];
    y2 = arguments[3];
    for (var i = 4; i < arguments.length; i += 2) {
        x1 = x2;
        y1 = y2;
        x2 = arguments[i];
        y2 = arguments[i + 1];
        context.arcTo(x1, y1, x2, y2, BORDER_RADIUS);
    }

    //finally, close the path:
    context.arcTo(x2, y2, arguments[0], arguments[1], BORDER_RADIUS);
    context.arcTo(arguments[0], arguments[1], startX, startY, BORDER_RADIUS);
    context.closePath();
}

El truco es comenzar (y detenerse) en el medio de la primera línea, y luego usar la función arcTo que aquí se describe muy bien.

Ahora "solo" debes encontrar una forma de expresar todas tus formas como polígonos.

Answer 3

El punto de partida podría ser using-svg-curves-to-imitate-rounded-esquinas . El principio es convertir cada esquina con abreviatura relativa cúbica (s). Este ejemplo es muy básico y solo funciona con dos posibles casos de esquina.

Creo que expandir esto como el reemplazo de esquina con taquigrafía relativa cúbica es posible expandir para cubrir también otros segmentos de ruta. Cada segmento tiene un punto de coordenadas en curva, que debe ser reemplazado por s segmento s . La matemática puede ser una parte interesante de esta solución.