Перейти к содержимому

Как закруглить края в канве

  • автор:

Как закруглить края в канве

Задача скопировать Image1 на канву формы, предварительно скруглив у Image края. Причем не все, а только 2 левых (верхний и нижний).

Я нашел как скруглить все четыре края у Панели:

Zakrug_Panel := CreateRoundRectRgn(0, 0, Panel_First.Width, Panel_First.Height, Zakrug_Koef, Zakrug_Koef); // закругление углов панелей
SetWindowRgn(Panel_First.Handle, Zakrug_Panel, FALSE);
DeleteObject(Zakrug_Panel); // если регион для закругления больше не нужен, то он освобождается

Но для Image это не применимо.
Как обойти напасть?


DVM © ( 2011-10-16 18:20 ) [1]

А почему бы просто в графическом редакторе не скруглить края изображения, сделав углы прозрачными?


Игорь Шевченко © ( 2011-10-16 18:22 ) [2]


> Задача скопировать Image1 на канву формы, предварительно
> скруглив у Image края. Причем не все, а только 2 левых (верхний
> и нижний).

SelectClipRgn


igorium © ( 2011-10-17 12:35 ) [3]


> DVM © (16.10.11 18:20) [1]
> А почему бы просто в графическом редакторе не скруглить
> края изображения, сделав углы прозрачными?

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


> Игорь Шевченко © (16.10.11 18:22) [2]
> SelectClipRgn

БОЛЬШОЕ СПАСИБО
Все работает.

Вопрос в догонку — у меня не получается обнулить область региона в Bitmap:

tempBMP := TBitmap.Create;
tempBMP.Width := Im_First.Width — 1;
tempBMP.Height := Im_First.Height — 1;
rgn := CreateRoundRectRgn(0, 0, tempBMP.Width, tempBMP.Height, Zakrug_Koef, Zakrug_Koef);
SelectClipRgn(tempBMP.Canvas.Handle, Rgn);
DeleteObject(rgn);
SelectClipRgn(tempBMP.Canvas.Handle, NULL); // ошибка .

Но в последней строчке компилятор пишет ошибку:
Could not convert variant of type (NULL) into type (Int64)

Это не смертельно — просто из-за этого приходится заново удалять и заново создавать Bitmap.


Плохиш © ( 2011-10-17 12:57 ) [4]

Вместо NULL написать 0.

Компилятор не пропускает: «не соответствие типов HRGN и Pointer»


MBo © ( 2011-10-18 09:30 ) [8]

Писать нужно всё-таки 0
А уничтожение еще задействованного объекта региона — нездоровая логика.


Игорь Шевченко © ( 2011-10-18 20:41 ) [9]


> А уничтожение еще задействованного объекта региона — нездоровая
> логика.

в данном случае нормальная логика
«Only a copy of the selected region is used. The region itself can be selected for any number of other device contexts or it can be deleted.»


MBo © ( 2011-10-19 05:46 ) [10]

>»Only a copy of the selected region is used. The region itself can be selected for any number of other device contexts or it can be deleted.»

Оба-на!
Виноват (тем более, что с этим уже сталкивался).

Как закруглить края в канве

bg

Рамки на фото

Друзья, встречайте новые рамки для фото в нашем фоторедакторе. Теперь в вашем распоряжении рамки в стиле Роскошь, От руки и Краски. Все рамки пока что доступны только для круглых фотографий. Но в не за горами тот день, когда вы сможете обрезать фото в форме квадрата или сердца и так же наложить модную рамку на картинку.

Обрезать фото в форме

Выберите какую форму вы хотите придать вашему фото. Круглая или квадратная картинка, а так же еще много разных вариантов для редактирования формы вашего фото. Вы можете задать любую форму фото, обрезать под пост соцсети: facebook, instagram или вк. Украсьте вашу ленту фоткой нестандартной формы и получите заслуженные лайки и репосты.

1

2

Текст, стикеры

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

Фильтры, фоны

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

3

Linkedin Facebook Instagram Tinder коллаж

Сделайте смешную картинку, чтобы принять участие в Долли Партон Challenge в инстаграм. Все, что вам нужно, это выбрать 4 фотографии — строгую корпоративную для LinkedIn, семейную или дружескую для Facebook, гламурную для Instagram и романтическую для Tinder. Остальное сделает наш фоторедактор. Создавайте и делитесь в ваших соц сетях, давайте повеселимся!
Linkedin Facebook Instagram Tinder генератор мема.

О сервисе

Сервис «Скруглитель» создан для пользователей которые хотят сделать круглую аватарку или картинку онлайн. С нашим сервисом скруглить углы фотографии онлайн можно без фотошопа или других программ.

Конфиденциальность

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

Условия использования

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

Предложения по улучшению, сведения о ошибках отправляйте на email

© 2024 Скруглитель, все права защищены. Читайте Скруглитель блог

Скруглить Углы для Фото

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

Другие инструменты для фото

Фото Коллажи

Создавай Коллажи из Фото

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

Изменить размер фото

Изменить Размер Фото

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

Обрезать фото

Обрезать Фото Онлайн

Нужно обрезать фото? Легко! Воспользуйтесь нашим редактором, который поможет быстро обрезать фото в нужной области. Вы также можете выбрать из списка пропорции обрезки, например, фото 3х4 или обложка Youtube, это сделает обрезку максимально точным.

Отразить фото

Отразить и Повернуть Фото

Нужно быстро зеркально отразить фото? Тогда воспользуйтесь нашим простым редактором, который поможет вам быстро отразить фото вертикально или горизонтально, а также повернуть фото вправо или влево.

Размыть фото

Размыть Фото Онлайн

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

Фото фильтры

Фото Фильтры и Эффекты

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

Фото рамки

Добавить Рамку для Фото

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

Арт Фото

Арт Фильтры для Фото

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

Текстуры для фото

Красивые Текстуры для Фото

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

Добавить текст к фото

Добавить Текст на Фото

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

Добавить клипарт

Добавить Клипарт к Фото

Этот инструмент сделает настроение для любой фотографии или изображения. Выберите подходящий стикер из сотен видов клипарта и добавьте к своему фото одним кликом. Перетаскивайте стикеры внутри фото и настраивайте их по своему желанию.

Эффект Виньетки

Эффект Виньетки для Фото

С этим инструментом вы сможете быстро добавить виньетку к фото и настроить параметры яркости и насыщенности. Виньетка делает края фотографии немного затемненными и увеличивает визуальный фокус центра фото.

Тилт шифт для фото

Тилт Шифт Эффект для Фото

Хочешь сделать эффект Тилт Шифт для фото? Попробуй инструмент Tilt Shift от нашего бесплатного фоторедактор, который позволяет быстро настроить величину фокуса и глубину размытия изображения. Вам больше не нужно скачивать дополнительные программы, чтобы добиться эффекта Тилт Шифт.

  • Fotoramio
  • Скруглить углы фото

Как закруглить края в канве

Создаем «канвас html» :

Ваш браузер не поддерживает canvas

Создаем объект с помощью getElementById, чтобы взаимодействовать с «canvas html».

var canvas = document.getElementById(«myCanvas»);

В случае, если браузер не поддерживает «canvas» выводим:

Ваш браузер не поддерживает canvas

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте:

var context = canvas.getContext(«2d»);

beginPath() — начинает контур или сбрасывает текущий контур.

moveTo() — передвигает точку контура в заданные координаты не рисуя линию.

Начальная точка линии в canvas — сделаем её в нулевой точке(это верхний левый угол):

context.moveTo( 0, 0);

lineTo() — добавляет новую точку контура и создает линию к этой точке от последней заданной точки

Вторая точка будет противоположная по диагонали в правом нижнем углу — это максимальная ширина + максимальная высота canvas -см здесь выше пункт №1.

context.lineTo( 600, 200);

stroke() — рисует фигуру, контур которой был задан ранее.

Соберем весь код вместе:

Пример линии по диагонали canvas Левый верхний на правый нижний .

У меня на сайте только живой пример:

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

Линия по диагонали — canvas(левый нижний — правый верхний

Вторую линию по диагонали в canvas нарисуем из левого нижнего угла в правый верхний угол!

Для этого вам понадобитсяч:

Теория из предыдущего пункта.

И всего лишь поменять начальные координаты начали линии на нулевую по оси «x» и максимальную высоту canvas в 200px:

context.moveTo( 0, 200);

А конечная точка нашей линии в canvas будет правый верхний угол, его координаты будут.. по оси «x» ширина canvas в 600px, по оси «y» ноль.

context.lineTo( 600, 0);

Линия canvas левый нижний на правый верхний по диагонали.

Вертикальная линия от края до края canvas.

Следующий пример — сделаем вертикальную линию посередине нашего холста!

Для этого вам понадобится:

Теория из самого первого пункта .

И всего лишь изменить координаты линии, которую вы собираетесь нарисовать!

Посередине оси «х» это будет . ширина нашего холста 600px деленное пополам = 300, по оси «Y» = 300

context.moveTo( 300, 0);

Вторая точка это будет по оси «X» = 300, по оси «Y» = 300:

context.lineTo( 300, 300);

Вертикальная линия canvas от края до края.

Горизонтальная линия от края до края canvas.

Следующий пример — сделаем горизонтальную линию посередине нашего холста!

Теория из самого первого пункта .

И всего лишь изменить координаты линии, которую вы собираетесь нарисовать!

По оси «х» это будет = 0. Ширина нашего холста 200px деленное пополам = 100, по оси «Y» = 100

context.moveTo( 0, 100);

Вторая точка это будет по оси «X» = 600, по оси «Y» = 100:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *