Domanda

sto cercando di disegnare un colpo rosso (spessore 1) attorno ad un rettangolo arrotondato, ma la corsa non è in fila correttamente circa gli angoli arrotondati.

angoli del mio rettangolo arrotondato hanno un ellipseWidth e ellipseHeight di 40. dal momento che sono uguali io sono fiducioso nel ritenere che la curvatura di ogni angolo inizia al meno la metà della dimensione d'angolo. Così, invece di disegnare dell'ictus fino all'angolo io terminare la corsa a 20 pixel prima della curva e la curva a 20 pixel dopo lo spigolo. chiaro come il fango?

È interessante notare che, se disegno la mia corsa tutto intorno il rettangolo arrotondato seguendo lo stesso codice, la corsa è solo impreciso disegnato attorno a questi due angoli. Inoltre, se la corsa viene aumentata a 2, le lacune non sono più visibili.

//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);

alt text


Aggiorna

più grande è il rect rotonda e dei suoi angoli diventano, più spostato il mio ictus diventa. Non sono più fiducioso che i miei punti di curvatura / ancoraggio per il mio curveTo (funzioni) sono corrette sono. qualche idea? alt text

È stato utile?

Soluzione

Perché non si utilizza drawRoundRect per disegnare la corsa? Oppure utilizzare la curvatura per il riempimento? O ictus set, riempimento set e poi drawRoundRect?


Ok, quindi controllare questo codice:

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

E 'il problema con il modo divertente la larghezza e l'altezza è calcolato. Ogni volta che si desidera inserire qualcosa sul l'ultimo pixel di qualche forma, bisogna metterlo su una postion x + larghezza - 1 non sono sicuro se è perfetto, ma da quello che posso vedere! essa sembra sembrano promettenti.


ho lasciato rectWidthS e rectHeightS valori intatti, ma dopo aver modificato per rectCornersS = 40, sembra funzionare perfettamente. Date un'occhiata http://img137.imageshack.us/img137/7779/58480490.png . O non riesco a vedere qualcosa. Capisco però che ancora potrebbe non funzionare perfettamente con forme più complesse, ma dovrebbe essere fattibile con il lavoro sufficiente.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top