Question

Je tente de tirer un trait rouge (1 épaisseur) autour d'un rectangle arrondi, mais la course ne soit pas aligner correctement autour des coins arrondis.

mes coins du rectangle arrondi ont un ellipseWidth et ellipseHeight de 40 ans, car ils sont égaux, je suis confiant dans l'hypothèse où la courbure de chaque coin commence à la moitié moins de la taille d'angle. donc au lieu de tirer ma course jusqu'au coin, je vais mettre fin à la course à 20 pixels avant le coin et la courbe à 20 pixels après le coin. clair que la boue?

Fait intéressant, si je dessine ma course tout autour du rectangle arrondi suivant le même code, la course n'est improprement dessiné autour de ces deux angles. En outre, si la course est augmentée à 2, les écarts ne sont plus visibles.

//Rounded Rectangle
var rectWidth:uint = 300;
var rectHeight:uint = 100;
var rectCorners:uint = 40;

var rect:Shape = new Shape();
rect.graphics.beginFill(0);
rect.graphics.drawRoundRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight, rectCorners, rectCorners);

//Stroke
var stroke:Shape = new Shape();
stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

//Stroke Around Top Right Corner
stroke.graphics.moveTo(rect.x + rectWidth / 2 - rectCorners / 2, rect.y - rectHeight / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y - rectHeight / 2, rect.x + rectWidth / 2, rect.y - rectHeight / 2 + rectCorners / 2);

//Stroke Around Bottom Right Corner  
stroke.graphics.lineTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2 - rectCorners / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2, rect.x + rectWidth / 2 - rectCorners / 2, rect.y + rectHeight / 2);

//Add To Display List
addChild(rect);
addChild(stroke);

text alt


UPDATE

plus la rect ronde et ses coins deviennent, plus déplacé ma course devient. Je ne suis plus confiant que mes points courbure / ancrage pour mes fonctions curveTo () sont corrects. Des pensées? text alt

Était-ce utile?

La solution

Pourquoi utilisez-vous pas drawRoundRect pour tirer la course? Ou utilisez le courbant pour le remplissage? Ou la course ensemble, remplissage et ENSUITE drawRoundRect ensemble?


Ok, puis vérifiez ce code:

        var rectWidth:Number = 300;
        var rectHeight:Number = 100;
        var rectCorners:Number = 40;

        var rectWidthS:Number = 300 - 1;
        var rectHeightS:Number = 100 - 1;
        var rectCornersS:Number = 40 - 1;

        var rect:Shape = new Shape();
        rect.graphics.beginFill(0);
        rect.graphics.drawRoundRect(0, 0, rectWidth, rectHeight, rectCorners, rectCorners);

        //Stroke
        var stroke:Shape = new Shape();
        stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

        //Stroke Around Top Right Corner
        stroke.graphics.moveTo (rectWidthS - rectCornersS / 2, 0);
        stroke.graphics.curveTo(rectWidthS,                   0, rectWidthS, rectCornersS / 2);

        //Stroke Around Bottom Right Corner  
        stroke.graphics.lineTo (rectWidthS,                   rectHeightS - rectCornersS / 2);
        stroke.graphics.curveTo(rectWidthS, rectHeightS, rectWidthS - rectCornersS / 2, rectHeightS);

Il est le problème avec la façon drôle est calculée la largeur et la hauteur. Chaque fois que vous voulez placer quelque chose sur le pixel DERNIERE d'une certaine forme, vous devez le placer sur une postion x + largeur - 1 Je ne sais pas si elle est parfaite, mais ce que je peux voir! il ne semble regarder prometteur.


Je laisse rectWidthS et rectHeightS valeurs intactes, mais après la modification de rectCornersS = 40, il semble fonctionner parfaitement. Jetez un oeil http://img137.imageshack.us/img137/7779/58480490.png . Ou je ne vois pas quelque chose. Je comprends bien qu'il ne peut toujours pas travailler parfaitement avec des formes plus complexes, mais il devrait être possible avec assez de travail.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top