2

丸みを帯びた長方形の周りに赤いストローク（1の太さ）を描画しようとしていますが、丸みを帯びた角の周りにストロークが正しく整列していません。

角の丸い長方形の角のellipseWidthとellipseHeightは40です。これらは等しいので、各角の曲率は角のサイズのマイナス半分から始まると確信しています。したがって、ストロークをコーナーまで描画する代わりに、ストロークをコーナーの20ピクセル前で終了し、コーナーの20ピクセル後にカーブさせます。泥のように澄んでいますか？

興味深いことに、同じコードに従って丸みを帯びた長方形の周りにストロークを描画すると、ストロークはこれらの2つの角の周りに不正確に描画されるだけです。さらに、ストロークを2に増やすと、ギャップは表示されなくなります。

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

代替テキスト

アップデート

丸い長方形とその角が大きくなるほど、ストロークが大きくずれます。私は、curveTo（）関数の曲率/アンカーポイントが正しいことを確信できなくなりました。何かご意見は？ 代替テキスト

4

1 に答える 1

1

drawRoundRectを使用してストロークを描画してみませんか？または、曲線を塗りつぶしに使用しますか？または、ストロークを設定し、塗りつぶしを設定してから、drawRoundRectを設定しますか？

では、次のコードを確認してください。

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

これは、幅と高さの計算方法がおかしいという問題です。ある形状の最後のピクセルに何かを配置したいときはいつでも、それを位置x +幅-1に配置する必要があります！完璧かどうかはわかりませんが、私が見る限り、それは有望に見えるようです。

そのままrectWidthSにしてrectHeightS値を変更しましたが、に変更するとrectCornersS = 40、完全に機能するようです。http://img137.imageshack.us/img137/7779/58480490.pngをご覧ください。または私は何かを見ることができません。より複雑な形状ではまだ完全には機能しない可能性があることは理解していますが、十分な作業で実現可能であるはずです。

于 2010-11-03T14:02:43.530 に答える