PDA

Просмотр полной версии : Прямоугольник с закруглёными углами


Mnilionic
14.08.2010, 15:05
Помогите программно нарисовать прямоугольник с скруглёным углами.
С анкорами коекак разобрался методом подбора, а с контролами не получается.
вот что вышло:

function rad(deg) {
return Math.PI / 180 * deg;
}
var mc = this.createEmptyMovieClip('mc', 5);
mc._x = 10
mc._y = 10
mc.lineStyle(1, 0x000000, 100);
//
// прорисовываем друг за другом сторону -> угол
function drawRoundRec(w, h, r){
mc.moveTo(w-r, h);
drawConer(r, 0, w-r, h-r);
mc.lineTo(w, r);
drawConer(r, 90, w-r, r);
mc.lineTo(r, 0);
drawConer(r, 180, r, r);
mc.lineTo(0, h-r);
drawConer(r, 270, r, h-r);
mc.lineTo(w-r, h);
}
function drawConer(r, a, x, y){
var count = 3; // кол-во кривых на угол
var step = rad(90 / count);
var step1 = rad(a); // сектор
for( var i = 0; i < count; i++){
step1 += step;
x1 = r * Math.sin(step1);
y1 = r * Math.cos(step1);
cx = x;
cy = y;
mc.curveTo(cx ,cy, x1+x , y1+y);
}
}
drawRoundRec(600, 400, 30);

тригонометрия у меня очень хромает.
Может что-то готовое есть?
спасибо

rainbowrussia
14.08.2010, 15:48
function rad(deg) {
return Math.PI / 180 * deg;
}
var mc = this.createEmptyMovieClip('mc', 5);
mc._x = 10
mc._y = 10
mc.lineStyle(1, 0x000000, 100);
//
// прорисовываем друг за другом сторону -> угол
function drawRoundRec(w, h, r){
mc.moveTo(w-r, h);
drawConer(r, 0, w-r, h-r);
mc.lineTo(w, r);
drawConer(r, 90, w-r, r);
mc.lineTo(r, 0);
drawConer(r, 180, r, r);
mc.lineTo(0, h-r);
drawConer(r, 270, r, h-r);
mc.lineTo(w-r, h);
}
function drawConer(r, a, x, y){
var count = 10; // кол-во кривых на угол
var step = rad(90 / count);
var step1 = rad(a); // сектор
for( var i = 0; i < count; i++){
if (i == 0) {
x1 = r * Math.sin(step1);
y1 = r * Math.cos(step1);
mc.moveTo(x1+x, y1+y);
}
step1 += step;
x1 = r * Math.sin(step1);
y1 = r * Math.cos(step1);
cx = x;
cy = y;
// mc.curveTo(cx ,cy, x1+x , y1+y);
mc.lineTo(x1+x , y1+y);
}
}
drawRoundRec(600, 400, 30);


Но не удивляйтесь, что в режиме Quality->High будет выглядеть некрасиво (нормально будет только если толщина линии будет 2, 4, 6... то есть четная). Более-менее красиво будет только в Quality->Low. Такова уж специфика сглаживания во флеше.

ps. Вместо curveTo я использовал moveTo+lineTo.

Mnilionic
14.08.2010, 16:05
Если толщина нечётная можно рисовать её со смещением в .5 "пикселя".
Но вопрос был в том как это сделать курвами. Отрезками я и сам могу.
Всёравно спасибо.

rainbowrussia
14.08.2010, 20:22
Пардон, не уловил ваш замысел сразу.
Тогда вопрос - зачем вам отдельная процедура с итерационным построением закругления?
Курвами все делается проще и без тригонометрии:


var mc = this.createEmptyMovieClip('mc', 5);
mc._x = 10
mc._y = 10
mc.lineStyle(1, 0x000000, 100);
//
// прорисовываем друг за другом сторону -> угол
function drawRoundRec(x, y, w, h, r){
mc.moveTo(x + r, y);
mc.lineTo(x + w - r, y);
mc.curveTo(x + w, y, x + w, y + r);
mc.lineTo(x + w, y + h - r);
mc.curveTo(x + w, y + h, x + w - r, y + h);
mc.lineTo(x + r, y + h);
mc.curveTo(x, y + h, x, y + h - r);
mc.lineTo(x, y + r);
mc.curveTo(x, y, x + r, y);
}
drawRoundRec(100, 50, 400, 200, 30);


Я ввел еще 2 параметра, чтобы можно было строить произвольный скругленный прямоугольник в любых координатах.

Mnilionic
14.08.2010, 22:05
Действительно, одной кривой на угол, визульно, вроде, вполне достаточно.
Спасибо.