X (fermer) forme en SVG

Question

Je suis en train de faire cette forme SVG (ignorer l'arrière-plan de couleur, juste la forme X)

Close SVG Path

mais ne pas Illustrator et ne connaîtraient pas comment l'utiliser. Est-ce que quelqu'un peut donner un coup de main avec l'idée générale, ou me montrer des alternatives?

Je l'utilise en flex.

Answer 1

Un moyen simple et bon marché de le faire est d'obtenir un morceau de papier millimétré et de marquer un bloc de carrés de 16x16 (ou autre dimension). Écrivez les nombres 0-15 le long des côtés supérieur et gauche du bloc, chaque nombre correspondant à l'un des petits carrés.

Dessinez ensuite votre silhouette (dans ce cas, un X) en commençant par l'un des carrés et sans soulever votre stylo du papier, continuez le contour jusqu'à ce que vous reveniez au point de départ. (Cela ne doit pas être parfait, ou même un très bon dessin.)

Ensuite, faites une liste des points où la ligne change de direction. Ce sont les nœuds que vous allez utiliser pour votre dessin.

Dessinez un simple triangle pointant vers le bas dans le coin supérieur gauche du gros bloc en utilisant cette méthode. Commencez à 0,0 et continuez jusqu'à 0,7, à quel point vous tournez et continuez la ligne à 3,3, puis vous pivotez à nouveau et continuez la ligne jusqu'à 0,0 et arrêtez.

Maintenant, vous avez un tableau de points:

[new Point(0,0), new Point(0,3), new Point(3,3), new Point(0,0)]; 

En utilisant les méthodes de l'objet graphique, vous pouvez effectuer les opérations suivantes:

private function drawInvertedTriangle():void { 
    var aryPoints:Array = [ 
      new Point(0,0) 
     , new Point(0,3) 
     , new Point(3,3) 
     , new Point(0,0)]; 
    var bgColor:uint = 0x0000CC; // darkish blue 
    var child:Shape = new Shape(); 
    child.graphics.beginFill(bgColor); 
    child.graphics.moveTo(aryPoints[0].x, aryPoints[0].y); 
    for (var i:int=1; i<aryPoints.length; i++) { 
     var pt:Point = aryPoints[i]; // for clarity in this sample 
     child.graphics.lineTo(pt.x, pt.y) 
    } 
    child.graphics.endFill(); 
    addChild(child); 
} 

J'ai codé en dur vos points dans ce méthode, mais vous pouvez facilement faire de aryPoints un argument de la fonction, auquel cas elle dessine n'importe quelle forme pour laquelle elle a un tableau d'au moins 3 éléments.

Maintenant, pour tracer le X que vous voulez, vous devez d'abord utiliser la méthode graphics.drawRoundRect(), puis dessiner votre X au-dessus. Recherchez le gradientFill et les autres outils disponibles dans la classe Graphics.