ActionScript - 图形不准确？

Question

我正在尝试在圆角矩形周围绘制红色笔触（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() 函数的曲率/锚点是正确的。有什么想法吗？

Answer 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。或者我看不到什么。虽然我理解它可能仍然无法完美地处理更复杂的形状，但它应该是可行的。