Appliquer des coins arrondis aux chemins / polygones

Je suis la collecte de certaines informations pour un projet qui doit commencer dans un délai de quelques semaines.
Ce projet contient un navigateur de base de l'outil de dessin où les utilisateurs peuvent ajouter des formes prédéfinies ou formant des formes elles-mêmes. Les formes doivent être sélectionnables, librement extensible et orientable avec un Illustrateur-comme transformtool (poignées).
Formes prédéfinies que nous avons à l'esprit sont: des rectangles, des ellipses, des demi-ellipses et (isocèle) triangles.

So far So good, pour atteindre ce que je pensais de RaphaelJS ou FabricJS mais... Chaque forme (polygone/chemin d'accès) doit être établi avec un certain cornerradius. Et le cornerradius doit être maintenue tandis que la mise à l'échelle, donc pas de distorsion se produit. L'utilisateur peut spécifier l'arrondi en entrée.

Il y a quelques obstacles/questions:

  • Est-il un uniforme mathemetical formule à appliquer un cornerradius à la forme que j'ai citées? Ou doit chaque forme d'être traité comme un mini-projet en lui-même? Je tiens à le retourner comme un chemin ou poly, de sorte qu'il peut être établi avec SVG ou canvas.
  • Chaque échelle ou de l'opération de rotation, en faisant glisser le transformhandles, entraînera (massive) des calculs pour récupérer une mise à jour de la forme je pense. Les Rectangles sont les plus faciles à atteindre et à l'exception des ellipses, toutes les autres formes sera beaucoup plus difficile à calculer. Est-il un moyen pour accélérer le processus?

J'ai trouvé un site où les utilisateurs peuvent dessiner des diagrammes et d'appliquer un cornerradius sur presque toutes les formes sont offerts. Cela marche si bien, je ne peux pas l'ongle comment ils ont fait.
Lien: https://www.lucidchart.com/ (bouton essayer)

Pour l'instant, je suis un peu paumé, je pense à médiocre en mathématiques. Peut-être que quelqu'un peut me pousser dans la bonne direction et de partager quelques expériences?

Merci d'avance.

BTW. La Performance est la clé dans ce projet. La sortie du dessin doit être en format SVG.

source d'informationauteur MaPaBa | 2013-10-09

  1. 29

    J'ai fini par avoir un problème similaire, et n'était pas en mesure de trouver une solution simple. J'ai fini par écrire un générique du coin de l'arrondissement de la fonction basée sur Adobe Illustrator. Il utilise des courbes de Bézier au lieu d'arcs, mais je pense que le résultat est assez décent.

    Il prend en charge arrondi avec un rayon donné dans l'espace de coordonnées de l'image SVG, ou comme une fraction de la distance entre un coin et ses voisins.

    Pour l'utiliser, comprennent rounding.js dans votre projet et l'appel de la fonction:

    roundPathCorners(pathString, radius, useFractionalRadius)

    Le code et test chemins sont ici: http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview

    C'est de cette façon les exemples de la Plnkr rendu:

    Appliquer des coins arrondis aux chemins /polygones

  2. 2

    En dépit de cette question depuis un certain temps, certains peuvent arrêter et d'essayer cette solution:

    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();
}

    L'astuce est de commencer (et stop) au milieu de la première ligne, puis utiliser le arcTo fonction qui décrit très bien ici.

    Maintenant, vous avez "juste" trouver un moyen d'exprimer toutes vos formes comme des polygones.

  3. 1

    Le point de départ pourrait être aide-svg-courbes-à-imiter-angles arrondis. Le principe est de convertir tous les coins avec abrégée par rapport cube (s). Cet exemple est très basique et ne fonctionne qu'avec deux cas de coin.

    Je pense que l'expansion de ce coin de le remplacer avec de l'abréviation par rapport cubique est possible d'étendre de manière à couvrir également d'autres segments de tracé. Chaque segment a une courbe de point de coordonnées, qui sont remplacées par s segment. Les mathématiques peuvent être intéressante partie de cette solution.