Кривые стороны пути треугольника? - PullRequest
Новая
       38

Кривые стороны пути треугольника?

4 голосов
/ 11 апреля 2011

Я рисую треугольник на холсте, что-то вроде: 

canvas.moveTo(0, 30);
canvas.lineTo(40, 0);
canvas.lineTo(40, 40);
canvas.lineTo(40, 40);
canvas.lineTo(0, 30);

И получаю правильный треугольник на моем холсте.Но мне нужно немного изогнуть стороны и заполнить этот путь определенным цветом.Какой самый простой способ сделать это?Рисование дуг?Но как заполнить объект?

This is what I need to get

Спасибо!

1 Ответ

6 голосов
/ 11 апреля 2011

РЕДАКТИРОВАТЬ: Я заметил, что вы используете холст Android, а не HTML Canvas, извините.Концепция точно такая же, за исключением того, что вы будете называть quadTo() вместо quadraticCurveTo(), поэтому мой пример все равно должен помочь вам.

Также на андроиде вы используете canvas.drawPath(path, paint) и передаете краску, которая имеетего Paint.style установлен в FILL_AND_STROKE.

Вы захотите построить путь, fill() его, затем stroke() его, чтобы получить как заполненный путь с контуром обводки.

Чтобы получить эту конкретную форму, самый простой способ - нарисовать две квадратичные кривые.Квадратичная кривая сначала нуждается в контрольной точке x, y, а затем в конечной точке x, y.Контрольная точка для обеих кривых должна быть около середины желаемого треугольника.Вот пример: 

ctx.fillStyle = "lightgray";

ctx.moveTo(0, 100);
ctx.quadraticCurveTo(50, 50, 50, 0);
ctx.quadraticCurveTo(50, 50, 100, 100);
ctx.lineTo(0, 100);
ctx.fill();
ctx.stroke();

Вот этот пример для вас.

...