comment utiliser l'attribut du stroke-dasharray,stroke-linecap,stroke-linejoin dans raphaeljs

Quelqu'un peut-il me donner un exemple de ces attributs dans l'action: stroke-dasharray, stroke-linecap, stroke-linejoin j'ai essayé de les utiliser, mais je n'ai pas très bien compris la sentext de la structure de leurs valeurs.

Vous pourriez également être intéressé par: oreilly.com/catalog/svgess/chapter/ch03.html
lien sympa......

OriginalL'auteur zero | 2012-06-07

30

stroke-linecap
- Les Valeurs: butt | round | square | inherit
- Exemple
stroke-linejoin
- Les Valeurs: miter | round | bevel | inherit
- Exemple
stroke-dasharray
- Les Valeurs: par des virgules ou des espaces délimités liste des longueurs ou des pourcentages,
  
  par exemple, "100 20 0 20"
- Exemple (en utilisant les valeurs ci-dessus)
Votre explication pour "stroke-dasharray" bien que correcte pour le format SVG est incorrect pour Raphaël. Comme la question est spécifique à Raphaël, vous devriez modifier votre réponse. Chez Raphaël, vous n'utilisez pas des nombres, comme expliqué ci-dessous par @user568458. Plutôt, Raphaël s'attend à des tirets, des points et/ou des espaces pour produire les différents modèles de coups.

OriginalL'auteur Phrogz
33

Phrogz la réponse est idéal pour SVG simple, mais cette question est aussi marqués Raphaël, où les choses sont semblables, mais légèrement différents. Il n'y a pas beaucoup de bons exemples de paramètres de contour dans Raphaël, voici donc une complète démonstration en direct.

Elle présente des exemples de documenter comment utiliser stroke-dasharray (lignes pointillées et des lignes en pointillés), stroke-linejoin (avc style d'angle) et stroke-linecap (contour du chemin cap de style) dans Raphael.js.

Lien vers jsfiddle démo en live

Utilisation .attr({'stroke-dasharray': option}) pour pointillés /les lignes en pointillé Raphaël, avec une de ces options (pas de chiffres, à la différence de pure SVG):
```
["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
```
Utilisation .attr({'stroke-linejoin': option}) pour les arrondis, biseauté ou forte (mitre) des coins de Raphaël (de même que le SVG, sauf hériter):
```
["bevel", "round", "miter"]
```
Vous pouvez également définir .attr({'stroke-miterlimit': decimal}) qui contrôle le cut-off basé sur la largeur du trait et de l'angle au-delà de laquelle la mitre (sharp) les jointures sont émoussées. De même que le SVG avc-miterlimit donc SVG docs appliquer. Croix-navigateur variation dans ce qui peut être vu dans le jsfiddle ci-dessus (par exemple, entre Chrome & Firefox sur Windows)

Utilisation .attr({'stroke-linecap': option}) pour contrôler les bouchons sur la fin d'une caresse raphael chemin:
```
["butt", "square", "round"]
```
OriginalL'auteur user568458

Veuillez noter que cette réponse ne couvre que stroke-dasharray et est un complément de réponse par Phrogz.
Raphaël ne fournit pas beaucoup de liberté pour définir stroke-dasharray comme l'a déclaré user568458 et comme j'ai besoin de travailler comme les autres svg créateurs, j'ai fait un peu de tweak dans raphael.js pour tenir compte de l'ensemble stroke-dasharray valeurs.

addDashes = function (o, value, params) {
        var nvalue = dasharray[Str(value).toLowerCase()];
        if (nvalue!==undefined) {
            var width = o.attrs["stroke-width"] || "1",
                butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                dashes = [],
                i = nvalue.length;
            while (i--) {
                dashes[i] = nvalue[i] * width + ((i % 2) ? 1 : -1) * butt;
            }
            $(o.node, {"stroke-dasharray": dashes.join(",")});
        }else{
            $(o.node, {"stroke-dasharray": Str(value).toLowerCase()});
        }
    }

Remplacement de l'ancien code dans le fichier juste en dessous, où dasharray objet est défini.

OriginalL'auteur Puneet

0

Si vous souhaitez appliquer une ligne en pointillés dans une norme SVG sur Raphaël de la ligne de l'objet, cela a bien fonctionné pour moi; que je n'ai pas de chance en utilisant des période et des traits d'union, comme de par le Raphaël.
```
myLine.attr({stroke:'green'}).node.setAttribute('stroke-dasharray', '10,10');
```
Les paramètres (10,10 dans cet exemple) sont de la longueur,de l'écart et vous pouvez itérer que autant que vous le souhaitez. Comme 5, 5, 1, 5 serait plus courte des tirets avec les points.

Référence: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

OriginalL'auteur Ecropolis

Vous devez vous connecter pour publier un commentaire.

comment utiliser l'attribut du stroke-dasharray,stroke-linecap,stroke-linejoin dans raphaeljs

`stroke-linecap`

`stroke-linejoin`

`stroke-dasharray`

Lien vers jsfiddle démo en live