2

我正在尝试在圆角矩形周围绘制红色笔划（1 个粗细），但笔划未在圆角周围正确排列。

我的圆角矩形的角的 ellipseWidth 和 ellipseHeight 为 40。因为它们是相等的，所以我有信心假设每个角的曲率从角大小的负一半开始。因此，我不会将笔画一直画到拐角处，而是在拐角前 20 像素处结束笔画，并将其弯曲到拐角后 20 像素处。清如泥？

有趣的是，如果我按照相同的代码在圆角矩形周围一直画笔画，那么笔画只会在这两个角周围不准确地绘制。此外，如果将行程增加到 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 + width - 1 的位置上！我不确定它是否完美，但从我所见，它看起来确实很有希望。

我离开rectWidthS并rectHeightS保持不变，但在修改为 之后rectCornersS = 40，它似乎工作得很好。看看http://img137.imageshack.us/img137/7779/58480490.png。或者我看不到什么。我明白虽然它可能仍然不能完美地处理更复杂的形状，但它应该是可行的，只要做足够的工作。

于 2010-11-03T14:02:43.530 回答