Как сделать тень в канве
Перейти к содержимому

Как сделать тень в канве

  • автор:

Сделать аккуратную тень под фотографией или картинкой онлайн

Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.

Пример фотографии розовой розы без изменений и три примера с добавленной тенью под этой фотографией:
Оригинальная фотография розы Фотография с добавленной под ней аккуратной тенью
Тень под фотографией слева вверху Фотография с тенью справа снизу на белом фоне

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

Настройки, которые были использованы для создания тени, как во втором примере:
Смещение тени по оси X — «-7»
Смещение тени по оси Y — «-7»

Тень в третьем примере сделана с такими настройками:
Смещение тени по оси X — 7
Смещение тени по оси Y — 7

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка.

Как сделать тень в канве

Как нарисовать на TCanvas полупрозрачную тень или может быть градиентную?


antonn © ( 2006-02-08 19:20 ) [1]

тень от чего?


Новенький ( 2006-02-08 20:04 ) [2]

Вывожу картинку(фото), хотелось бы сделать вокруг плавную тень.


Gorger © ( 2006-02-09 07:01 ) [3]

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


ancara © ( 2006-02-09 10:48 ) [4]

Еще был бы неплохой эффект, если бы удалось нарисовать сначало черный прямоугольник размером с фото, но немного сместив вправо и вниз (это если воображаемый свет светит слева-сверху). Затем размыть его, скажем, по Гауссу, а потом поверх нарисовать непосредственно само фото. Тень получается очень приличная, в фотошопе, по крайней мере. А что мешает сделать то же самому?
Только вот насчет Гаусса посоветовать ничего немогу, не писал его еще. Спрашивай, может у кого готовая процедурка есть.


ancara © ( 2006-02-09 11:13 ) [5]

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

Ну с полупрозрачной проблем нет, все просто:
— выбираем коэффициентпрозрачности, скажем 0.3
— берем цвет пикселя фона: (R1, G1, B1) умножаем на 1-0.3=0.7 каждую
компоненту: (0.7*R1, 0.7*G1, 0.7*B1)
— берем цвет пикселя тени (R2, G2, B2) умножаем на 0.3 каждую
компоненту: (0.3*R2, 0.3*G2, 0.3*B2)
— затем складываем покомпонентно эти два цвета и имеет результирующий цвет
пикселя, который затем рисуем: (0.7*R1+0.3*R2, 0.7*G1+0.3*G2, 0.7*B1+0.3*B2)

Градиентная еще проще:
— по мере удаления от края фотографии коэффициент уменьшается до нуля
— только на углах будут артефакты, а от них поможет опять же Гаусс.


ancara © ( 2006-02-09 11:55 ) [6]

во, нашел Гаусса: http://www.delphirus.net.ru/topic2.html


Новенький ( 2006-02-09 13:40 ) [7]

Спасибо, попробую. Там даже пример есть.


programania © ( 2006-02-09 18:47 ) [8]

//рисование тени от текста или прямоугольника

program ten;
uses windows, graphics, sysutils, classes;

PROCEDURE teni(
c: tCanvas; //где рисовать
xn,yn: integer; //откуда начинать
wt,ht: integer; //если не 0 то прямоугольник с этой шириной и высотой
text: string; //текст
ct: integer; //цвет текста, прямоугольника, -1 не заполнять
rt: integer; //размер текста, для прямоугольника закругления углов
st: integer; //размытие тени 0..32
xs,ys: integer; //смещение тени вправо, вниз
pl: integer); //плотность тени 0..100

var
b: tBitmap;
m,t,tt: ^tm;
j,w,h,x,y,xx,yy,r,x1,x2,x3,c1,c2,c3,k,rm,st2: integer;
s : pbytearray;
c4: array[1..4] of byte absolute ct;
pr: boolean; //прямоугольник
z: boolean; //заполнять текст прямоугольник

with b.canvas do begin
//Вывод текста, прямоугольника в bitmap
brush.color:=$FFFFFF;
if pr then begin w:=wt; h:=ht end
else begin
font.name:=»Times new roman»;
font.size:=rt;
font.color:=0;
font.style:=[fsBold];
w:=textWidth(text);
h:=textHeight(text);
end;

inc(w,st*4);
inc(h,st*4);
b.width:=w;
b.height:=h;
st2:=st*2;
if pr then begin brush.color:=$0; roundRect(st2,st2,wt+st2,ht+st2,rt,rt) end
else TextOut(st2,st2,text);
end;

//вывод текста из bitmap в массив m
for y:=0 to h-1 do begin
s:=b.scanLine[y];
x1:=0;
for x:=0 to w-1 do begin m^[y,x]:=s[x1]; inc(x1,3) end;
end;

//Размытие текста в массиве tt
move(m^,t^,rm);
fillChar(tt^,rm,255);
for j:=1 to st do begin
for y:=st to h-st do for x:=st to w-st do begin
r:=0;
for yy:=y-1 to y+1 do for xx:=x-1 to x+1 do inc(r,t^[yy,xx]);
tt^[y,x]:=r div 9;
end;
move(tt^,t^,rm);
end;

//вывод тени в bitmap
b.canvas.copyRect(rect(0,0,w,h),c,rect(xn,yn,xn+w,yn+h));
for y:=ys to h-1 do begin
s:=b.scanLine[y];
x1:=xs*3; x2:=x1+1; x3:=x2+1;
for x:=xs to w-1 do begin
if m[y,x] if z then begin c1:=c4[1]; c2:=c4[2]; c3:=c4[3] end
else begin c1:=s[x1]; c2:=s[x2]; c3:=s[x3] end
end
else begin
k:=255-(255-t^[y-ys,x-xs]) * pl div 100;
c1:=s[x1] * k div 255;
c2:=s[x2] * k div 255;
c3:=s[x3] * k div 255;
end;
s[x1]:=c1; s[x2]:=c2; s[x3]:=c3;
inc(x1,3); inc(x2,3); inc(x3,3);
end;
end;

//вывод bitmap на canvas
c.draw(xn,yn,b);
b.free;
freeMem(m);
freeMem(t);
freeMem(tt);
end;

begin
ce:=tCanvas.create;
ce.Handle:=GetDC(0);
teni(ce,50, 60, 400,200,»», $AAAAFF,20, 24,10,10,60);
teni(ce,130,130,0, 0, «ТЕНЬ», $FF0000,72,6, 4, 4, 100);
teni(ce,120,300,0, 0, «ТЕКСТ»,$FFCC88,96,6, 6, 6, 100);
end.


Fenik © ( 2006-02-10 00:29 ) [9]

> Gorger © (09.02.06 07:01) [3]

Хуже совета не придумаешь..

Создание тени у рисуемой графики

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

Свойства shadowOffsetX и shadowOffsetY задают смещение тени, соответственно, по горизонтали и вертикали относительно фигуры в пикселах в виде чисел. Положительные значения смещают тень вправо и вниз, а отрицательные — влево и вверх. Значения этих свойств по умолчанию — 0, т. е. фактически отсутствие тени.

Свойство shadowBlur задает степень размытия тени в виде числа. Чем больше это число, тем более размыта тень. Значение по умолчанию — 0, т. е. отсутствие размытия.

Свойство shadowColor задает цвет тени. Цвет задается в виде строки в любом из форматов, описанных в начале этой главы. Значение по умолчанию — черный непрозрачный цвет.

ctxCanvas.shadowColor = «rgba(128, 128, 128, 0.5)»;

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

ctxCanvas.fillText(«Двое: я и моя тень.», 150, 50);

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

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

Параметры тени у текста

Параметры тени у текста Любителям все украшать стандарт CSS 3 предлагает одну очень интересную возможность — создание тени у текста. При умеренном употреблении она может заметно оживить Web-страницу.Параметры тени задает атрибут стиля text-shadow:text-shadow: none | <цвет>

Создание тени у рисуемой графики

Создание тени у рисуемой графики Еще канва позволяет создавать тень у всех рисуемых фигур. Для задания ее параметров применяют четыре свойства, которые мы сейчас рассмотрим.Свойства shadowOffsetX и shadowOffsetY задают смещение тени, соответственно, по горизонтали и вертикали

Параметры тени у текста

Параметры тени у текста Любителям все украшать стандарт CSS 3 предлагает одну очень интересную возможность — создание тени у текста. При умеренном употреблении она может заметно оживить Web-страницу.Параметры тени задает атрибут стиля text-shadow:text-shadow: none | <цвет>

§ 127. Без тени сомнения

§ 127. Без тени сомнения 11 января 2006После того как Че Гевара выступил третьим лицом в Кубинской революции, ему стало скучно быть чиновником в новом государстве, и в начале 1965 года он отправился в Конго. Здесь Че Гевара предполагал продолжить революционную деятельность,

Глава 10 Создание графики в Excel

Глава 10 Создание графики в Excel В предыдущей главе мы рассмотрели работу с графическими изображениями, добавляемыми на лист книги Excel. В программе Excel, как и в некоторых других приложениях пакета Microsoft Office, предусмотрено также создание простых графических изображений

Создание простой графики

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

Приложение C Создание графики для мобильных игр

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

события: В ожидании тени

события: В ожидании тени Автор: Александр БумагинНа днях я решил забронировать места на базе отдыха, куда собрался с семьей летом. Предварительные расценки я знал давно, так что «окончательные цены», названные менеджером по телефону, стали для меня большим сюрпризом. Как

ТЕМА НОМЕРА: Жизнь в тени

ТЕМА НОМЕРА: Жизнь в тени Автор: Леонид Левкович-МаслюкСегодня мы посмотрим на инновационную экономику под непривычным для нашего журнала углом. Часто приходится слышать о, как раньше стыдливо выражались, «злоупотреблениях», царящих в этом секторе, а заодно и вообще

Космос: По следам лунной тени

Космос: По следам лунной тени Автор: Александр БумагинОчень может статься, что ажиотажа вокруг недавнего солнечного затмения не поймут не только те, кто не стал свидетелем явления, но и некоторые из тех, кому довелось его увидеть. Последние, как правило, в лунной тени

В тени ветвей у Медвежьего озера

В тени ветвей у Медвежьего озера Автор: Киви БердАнализ побочных каналов утечки информации, с подачи американских военно-шпионских структур часто именуемый звучным кодовым словом Tempest, уже давно перестал быть хайтек-экзотикой, окружённой самыми невероятными слухами и

ПЕРЕПИСКА: Из тени в тень перелогинясь

ПЕРЕПИСКА: Из тени в тень перелогинясь Автор: Константин ИлющенкоПрочитав в статье «Web… money… money…» (#27-28 от 31.07.06) слова Евгения Козловского «… с помощью WebMoney вот уже несколько лет рассчитывается с иногородними авторами «Компьютерра», я подумал было про тень. Однако

NILFS выходит из тени

NILFS выходит из тени LinuxFormat, #121 (август 2009)Ядро Linux версии 2.6.30 порадовало нас, в числе прочих новшеств, и поддержкой NILFS (New Implementation of a Log-Structured File System) – Лог-структурированной Файловой Системы в Новом Исполнении. И действительно, в ряду ФС последнего поколения, таких, как более

ТЕНИ ИМПЕРАТОРСКОГО ФЛОТА

ТЕНИ ИМПЕРАТОРСКОГО ФЛОТА В умах наших соотечественников по-прежнему живет вышедшая в отставку два десятилетия назад биполярная картина мира. Патриоты-почвенники считают главной угрозой блок НАТО, организацию весьма вялую, которая, как показал август прошлого года, не

Тени

Тени Только если тени являются частью композиции, удачно дополняют и подчеркивают объект, стоит акцентировать на них внимание (рис. 8.11, 8.12). Рис. 8.11. Схема постановки света Рис. 8.12. Использование теней в кадреВ некоторых ситуациях случайные тени портят композицию. Чтобы

КАК ДОБАВИТЬ ТЕНЬ НА ТЕКСТ в Canva

Иконка канала Улучшение освещения на фотографии

Как добавить тень на текст в Canva Для чего мы добавляем тень на текст? Один из вариантов — это придание тексту интересного эффекта, другой вариант — придать читаемость тексту на фоне, для усиления эффекта можно добавить «подложку» под текст. ★ ★ ★ ★ ★ ★ ★ ★ ★ �� Я В СОЦИАЛЬНЫХ СЕТЯХ ►Vkontakte: https://vk.com/tanyalady74 ► Группа Vkontakte КРАСОТА, ЗДОРОВЬЕ, ДОМ, БИЗНЕС: https://vk.com/blogdomtb ►Instagram об АТОМИ: https://www.instagram.com/blogdomtb/ ►Instagram с лайфхаками: https://www.instagram.com/tanyalady74/ ★ ★ ★ ★ ★ ★ ★ ★ ★ �� Смотрите также: ⇨ Мои лайфхаки: https://www.youtube.com/playlist?list=PL6Mxbm7R5p4UjMqR8FVZCr1acvT-0wodm �� Подписывайтесь на канал и �� жмите на колокольчик Так вы сможете первыми узнавать о новинках.

Показать больше

Войдите , чтобы оставлять комментарии

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

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