Как сделать круг из пикселей

Обновлено: 02.07.2024

Массив пикселей содержит индекс пикселя, за которым следует его цвет.

До этого я использую этот код для массива "изображение" и "пиксели" (если это вам поможет)

Но как я могу рисовать только белые пиксели, как на этом изображении, и игнорировать остальные пиксели?

5 ответов 5

Вот код для рисования круга с пикселями: он использует формулу xend = x + r cos(угол) и yend = y + r sin(угол).

bios.h , graphics.h . Серьезно тонны ненужных зависимостей. Кроме того, у вас есть math.h , в котором есть константа PI, но вы можете определить свою собственную.

Если ваш круг слишком большой, это не сработает; вы просто получите 360 точек, расположенных по кругу, между которыми ничего нет.

Отлично! Это 6-й (или около того) и определенно лучший алгоритм круга, который я пробовал сегодня вечером. Не только с точки зрения сплоченности и плотности, но и с точки зрения рисования: он точно следует траектории круга (никогда не видел этого и люблю это). И еще одно преимущество: можно «играть» с «шагом», чтобы нарисовать круг быстрее . На самом деле, 3600 баллов не нужны. 720 точек с шагом 0,5 — это уже нормально. Проголосовал за.

Поскольку у вас уже есть BufferedImage , почему бы не создать для него графический объект и использовать его для рисования круга? Таким образом, вам не придется изобретать велосипед:

Обновить

Должно получиться вот такое изображение:

Не знаю почему, но я не вижу овал. Моя рамка пуста. КСТАТИ. Для рендеринга я использую образ размером с мой кадр

я использую f.add(class_object); Так что из-за этого ничего не работает. Добавьте это в свой код DrawCircleExample circle=new DrawCircleExample();f.add(circle); но напишите рядом с общедоступным классом DrawCircleExample, который расширяет Canvas

Чтобы нарисовать изображение на холсте, вам нужно перезаписать метод рисования Canvas. Я обновил пример.

Вы можете рассчитать минимальный угол между двумя пикселями и улучшить решение Kathir

Один из способов сделать это — проверить для каждой точки прямоугольника, меньше ли расстояние от этого пикселя до центра квадрата, чем предполагаемый радиус круга. Затем вы можете нарисовать пиксели, которые прошли тест, и пропустить пиксели, которые не прошли тест. Отношение площади круга к площади всего квадрата равно π/4, что составляет примерно 0,77, так что на самом деле это не так уж неэффективно.

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

Надеюсь, это поможет!

Извините за задержку. Этот код работает отлично

Двойной цикл работает медленно, вы можете использовать один цикл для выполнения той же работы. Чтобы еще больше повысить производительность, вы могли бы выполнять в четыре раза меньше операций с квадратом и квадратным корнем, используя две симметрии.

Оглянитесь вокруг, задержитесь и не стесняйтесь задавать вопросы!

Один из самых частых вопросов, которые задают начинающие художники по пикселям, — как нарисовать круг. Даже я задавался этим вопросом, когда только начинал, так что это будет первый туториал! Круг на самом деле очень прост, но его может быть трудно понять без какого-либо руководства в первый раз. В любом случае, начнем!

Круг Когда вы думаете о круге, вы редко думаете о краях (поскольку теоретически у круга нет краев), но в пиксельной графике края — это все, что нужно, чтобы убедить зрителя в том, что это действительно идеальный круг. Первое, что нам нужно сделать при рисовании круга, это начать с основы, на которую мы вскоре настроим. Эта база определяет, насколько большим будет весь круг. Основание представляет собой ровную линию. Для круга я использовал основу длиной восемь пикселей.

После того, как база создана, мы хотим, чтобы от нее осталось больше пикселей. Из этой плоской линии я разместил две линии шириной в два пикселя, а затем четыре одиночных пикселя в вертикальном движении. Хотя мы, по сути, создаем вертикальную линию, если мы посмотрим на круг издалека, мы обнаружим красивый округлый край. Когда вы создаете ребро для круга, вы хотите всегда заканчивать тем, что начали. Например, если вы посмотрите на диаграмму выше, кривая будет состоять из двух пикселей, одного пикселя, одного пикселя, одного пикселя, одного пикселя и двух пикселей. Обратите внимание, как мы начали с двух пикселей, а затем закончили с двумя пикселями? Это необходимо для создания круга.

После того, как ваша первая кривая будет завершена, вам нужно снова добавить базовую линию к сторонам. Это продолжит симметрию, которую мы ищем, и продолжит красивую кривую, которую мы идем. Наконец, снова создайте кривые, чтобы добраться до самой вершины круга, и завершите круг еще одной базовой линией. Теперь ваш круг завершен и должен выглядеть фантастически на 100%!

Примечание. Этой публикации больше года, поэтому содержащаяся здесь информация может быть устаревшей. Если вы что-то заметили, оставьте комментарий, и мы постараемся исправить это.

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

Начнем с того, что в PHP есть несколько встроенных функций, которые можно использовать для рисования дуги, окружности или эллипса в виде закрашенной фигуры или линии. Встроенная в PHP функция imageellipse(), которую можно использовать для рисования круга. Это часть библиотеки GD.

Этот код создает следующее изображение.

Функция imageellipse() принимает довольно много параметров, но может использоваться для рисования круга или эллипса в зависимости от предоставленных параметров. Чтобы нарисовать закрашенный круг, вы можете использовать функцию imagefilledellipse(), которая принимает те же параметры, но рисует закрашенный круг.

Как можно нарисовать круг без использования встроенных функций PHP? Самый простой способ — нарисовать закрашенный круг, проведя серию линий из центральной точки. Для каждого градуса в круге мы используем формулу:

То, что мы здесь делаем, — это вычисление точки, на которую опирается точка в центре круга. Это угол в определенной точке, когда прямые линии из самой дальней точки соединяются вместе. По сути, это линия, проведенная от центра круга к внешнему краю.

Имея это в руках, все, что нам нужно сделать, это пройти через все углы в круге (т.е. 360) и провести линию от центральной точки до координат, рассчитанных по приведенным выше уравнениям.

Обратите внимание, что этот код также включает вызов imagesetthickness(), значение которого мы увеличиваем до 4, чтобы создать полностью заполненный круг. Без этого вызова внешние края круга не соединяются должным образом, и круг не заполняется полностью. Это также можно отсортировать, увеличив количество шагов при увеличении $theta, но это также означает увеличение количества раз, которое нам нужно запустить цикл. Простой способ решить эту проблему — увеличить толщину нарисованной линии.

Этот код выводит следующий результат.

Чтобы нарисовать незакрашенный круг, нам просто нужно заменить функцию imageline() вызовом imagesetpixel(). По сути, это рисует пиксель в конце проецируемой линии.

С этим изменением создается следующий круг.

Если это выглядит немного странно, то это потому, что многие точки не связаны. Этот метод cos/sin хорош для маленьких кругов, но чем больше становится круг, тем дальше точки удаляются друг от друга, поэтому нам нужно увеличить количество итераций цикла, чтобы закрыть этот разрыв.

Лучшим алгоритмом рисования круга является алгоритм рисования круга Брезенхэма. Это связано с алгоритмом рисования линий Брезенхэма, но здесь мы проходим через каждую точку по окружности круга и принимаем решение о том, какой пиксель нам следует нарисовать, чтобы лучше всего соответствовать кругу.

Первый шаг — разделить круг на 8 сегментов по 45 градусов каждый. Поскольку круги симметричны, все, что нам нужно сделать, это разработать один сегмент, а затем мы можем преобразовать этот сегмент в другие 7 сегментов. Это означает, что нам не нужно зацикливаться на всем круге, а только на одном из сегментов.

Используя координаты центра окружности, мы можем определить первую точку в каждом из сегментов.

Затем мы можем начать вычислять, где находится каждая точка на первом отрезке. Первое решение вырабатывается по формуле $decision = 3 - (2 * $radius).

Решение о том, где рисовать следующий пиксель, рассчитывается с использованием следующего:

Если решение меньше 0, следующий пиксель будет отрисован в точке (x+1, y). Затем мы вычисляем решение по формуле $decision = $decision + (4 * $x) + 6. Мы также увеличиваем x.
Если решение больше 0, то следующий пиксель будет отрисован в точке (x+1, y-1). Затем мы вырабатываем решение по формуле $decision + 4 * ($x – $y) + 10. Мы также увеличиваем x и уменьшаем y.

Как только x и y сойдутся, мы можем остановиться, так как мы определили все точки окружности. Математика здесь получена из уравнения длины окружности, которое равно x 2 + y 2 - r 2 . Я обнаружил, что эта страница была хорошим введением в эту математику (хотя требуется некоторое время, чтобы понять, что происходит).

Следующий код реализует все это на практике.

Вот что выдает код.

Как видите, это гораздо более четкий круг, в нем нет пробелов или других ошибок. Этот алгоритм можно усовершенствовать, и я даже видел примеры, в которых используется только сдвиг битов, что делает его гораздо более эффективным.

Хотите узнать больше? Нужна помощь?

Поможем! Наймите нас для обучения, советов, устранения неполадок и многого другого.

Достижение совершенства пикселей при разработке элементов пользовательского интерфейса может быть простым благодаря функции Photoshop "привязать к пикселям". К сожалению, эта функция недоступна для инструмента «Эллипс», поэтому для создания четких кругов с идеальной точностью до пикселя может потребоваться дополнительное внимание к деталям. Я открою вам небольшой секрет, благодаря которому при создании кругов будет доступна функция "привязка к пикселям".

Слои формы и «Привязка к пикселям»

В связи с растущей потребностью в масштабируемых проектах проектирование с использованием слоев-фигур в Photoshop становится все более и более важным. Слои-фигуры основаны на векторных путях, что упрощает изменение их размера, цвета и формы. Однако, если вы не будете осторожны, когда вы создаете слои-фигуры, они могут легко выпасть из пиксельной сетки, что сделает дизайн размытым и непрофессиональным.

Достичь совершенства пикселей с помощью слоев-фигур очень легко благодаря функции Photoshop «Привязать к пикселям» для слоев-фигур.

К сожалению, как вы, возможно, уже знаете, функция "привязка к пикселям" недоступна для инструмента "Эллипс".

Если вы планируете создать в своем интерфейсе слой формы для этих красивых круглых аватаров, вам придется проверить точность вашего круга и правильность его попадания в пиксельную сетку (требуется повторяющееся масштабирование и незначительные корректировки, которые может стать утомительным).

Если бы круги можно было привязать к пикселям, верно? Что ж, есть небольшой обходной путь! Вы можете использовать «инструмент прямоугольника со скругленными углами», чтобы рисовать круги, просто указав радиус, равный как минимум половине размера круга, который вы создаете.

Шаг 1. Возьмите инструмент «Прямоугольник со скругленными углами»

Я знаю, что вы можете подумать: "Инструмент прямоугольника для создания круга?" Я знаю, это может показаться странным, но поверьте мне здесь.

Шаг 2. Установите флажок "Привязать к пикселям"

Теперь убедитесь, что флажок «Привязать к пикселям» выделен (в CS6 это флажок «Выровнять края» или «Привязать векторные инструменты и преобразования к пиксельной сетке» в настройках). Это гарантирует, что наш закругленный прямоугольник прилипнет к пиксельной сетке.

Шаг 3. Укажите (большой) радиус границы

Теперь введите значение радиуса границы, равное половине размера круга, который вы хотите нарисовать. Или вместо того, чтобы выполнять математические операции, просто введите «1000 пикселей», так как это максимальное значение, которое Photoshop примет (это означает, что вы не можете изначально нарисовать круг больше 2000 пикселей, но вы всегда можете масштабировать результат, если нужно).

Шаг 4. Нарисуйте четкий, идеальный по пикселям круг

Удерживая нажатой клавишу SHIFT, нарисуйте круг! (Удерживание SHIFT сохранит пропорции прямоугольника со скругленными углами).

Если вы создадите слишком маленький радиус границы, по мере роста вашего прямоугольника со скругленными углами его размеры в конечном итоге превысят радиус границы, и в этот момент у вас будет прямоугольник с закругленными краями.

Все!

Видите, как это было легко? Как упоминалось ранее, простой трюк состоит в том, чтобы придать скругленному прямоугольнику радиус границы, по крайней мере, вдвое меньше его размеров. Теперь вы можете легко создавать в Photoshop четкие масштабируемые круги с идеальной точностью до пикселя!

Читайте также: