ActionScript - неточная графика? - PullRequest
Новая
       2

ActionScript - неточная графика?

2 голосов
/ 03 ноября 2010

Я пытаюсь нарисовать красный обводку (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);

alt text

ОБНОВЛЕНИЕ

чем больше прямоугольник и его углы, тем больше смещается мой ход.я больше не уверен, что мои точки кривизны / привязки для моих функций curveTo () верны.Какие-нибудь мысли?alt text

1 Ответ

1 голос
/ 03 ноября 2010

Почему вы не используете 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. Или я что-то не вижу. Я понимаю, однако, что он все еще может не работать идеально с более сложными формами, но это должно быть выполнимо при достаточной работе.

...