Frage

Ich versuche einen roten Strich (1 Dicke) um ein Rechteck mit abgerundeten Ecken zu ziehen, aber der Hub wird Aneinanderreihung nicht richtig um die abgerundeten Ecken.

meine abgerundeten Rechtecke Ecken haben eine ellipse und ellipse von 40, da sie gleich bin ich zuversichtlich, in der Annahme, dass die Krümmung jeder Ecke bei minus der Hälfte der Ecke Größe beginnt. so statt meinem Schlaganfall den ganzen Weg bis zur Ecke Zeichnung i wird der Hub bei 20 Pixel vor der Ecke und Kurve auf 20 Pixel nach der Ecke beenden. klar wie Schlamm?

interessant, wenn ich meinen Schlag ziehen den ganzen Weg um das Rechteck mit abgerundeten Ecken nach dem gleichen Code, wird der Hub nur ungenau um diese beiden Ecken gezogen. zusätzlich, wenn der Hub auf 2 erhöht wird, werden die Lücken nicht mehr sichtbar sind.

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


UPDATE

je größer die Runde rect und seine Ecken werden, desto mehr verlagert mein Schlaganfall wird. Ich bin nicht mehr davon überzeugt, dass meine Krümmung / Ankerpunkte für meinen curveTo () Funktionen korrekt sind. irgendwelche Gedanken? alt text

War es hilfreich?

Lösung

Warum nicht drawRoundRect verwenden den Strich zu ziehen? Oder die Krümmung für Füllung verwenden? Oder Satz Schlaganfall, Set Füllung und dann drawRoundRect?


Ok, dann diesen Code überprüfen:

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

Es ist das Problem mit der lustigen Art und Weise der Breite und Höhe berechnet werden. Jedes Mal, wenn Sie an Ort etwas auf das letzte Pixel irgendeiner Form wollen, müssen Sie es x auf einer Postion platzieren + Breite - 1 Ich bin nicht sicher, ob es perfekt ist, aber von dem, was ich sehen kann! es scheint vielversprechend aussehen.


verließ ich rectWidthS und rectHeightS Werte unangetastet, aber nach zu rectCornersS = 40 ändern, so scheint es, perfekt zu arbeiten. Werfen Sie einen Blick http://img137.imageshack.us/img137/7779/58480490.png . Oder ich nicht etwas zu sehen. Ich verstehe aber, dass es vielleicht noch nicht perfekt mit komplexeren Formen arbeiten werden, aber es sollte mit genug Arbeit möglich sein.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top