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

Как нарисовать на 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);

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

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

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

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

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

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

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

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

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

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

Содержание

1. Быстрый выбор объекта

При работе над сложным дизайном бывает непросто найти нужный элемент в нижней части интерфейса.

Для того чтобы быстро перемещаться между объектами с помощью клавиш вверх и вниз, необходимо зажать COMMAND на MAC (или CTRL на ПК).

2. Поиск бесплатных шаблонов

Canva предлагает как бесплатные, так и платные объекты для использования. Чтобы отобразить только бесплатные элементы, необходимо ввести в строку поиска следующие коды: «brand:BAAMOuJH0Ec» или «brand:BAAAAP7rQ8M».

скриншот

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

3. Быстрый доступ к текстовому полю

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

4. Свободное перемещение элемента

Чтобы перемещать объекты без привязки к направляющим, необходимо зажать клавишу SHIFT. Так можно разместить элемент именно там, где нужно.

5. Группировка элементов

Выравнивание групп с большим количеством объектов может показаться непростым делом. Чтобы сгруппировать выбранные элементы, необходимо зажать клавишу SHIFT, выбрать их, а затем нажать «Группировать» в правом верхнем углу. Так вы сможете перемещать группу как один объект.

скриншот

6. Быстрая отмена и повтор действия

В Canva есть кнопки для отмены и повтора действия, но чтобы ускорить работу, можно использовать сочетания клавиш:

отменить: COMMAND + Z (CTRL + Z),
повторить: COMMAND + SHIFT + Z (CTRL + SHIFT + Z).

7. Нестандартный шрифт

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

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

скриншот

8. Перемещение элементов с помощью клавиш со стрелками

Иногда дизайнеру приходится выполнять точные операции: например, передвинуть объект всего на несколько пикселей. Для этого можно использовать клавиши со стрелками. Они перемещают элемент ровно на 1 пиксель. Если зажать SHIFT и клавишу со стрелкой, объект переместится на 10 пикселей. (Примечание: это не работает с текстовыми полями).

9. Быстрое изменение масштаба

Для увеличения и уменьшения масштаба обычно используются кнопки «+»/«-» в правом нижнем углу интерфейса. Однако есть и более быстрый способ.

Чтобы увеличить масштаб зажмите COMMAND или CTRL и клавишу «+».
Чтобы уменьшить — COMMAND или CTRL и клавиша «-».

10. Использование рамок

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

скриншот

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

11. Оптимизация для различных платформ

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

Чтобы ускорить этот процесс, нужно нажать на вкладку «Изменить размер» в верхнем меню. В выпадающем списке выберите нужные размеры (один или несколько). Нажмите кнопку «Копировать и изменить размер» внизу. После чего откроется новая вкладка для каждого размера. Далее вы сможете перейти к каждому из них и внести необходимые правки.

скриншот

12. Преобразование текста в верхний или нижний регистр

Для того, чтобы изменить регистр, необязательно удалять текст и набирать его заново. Просто выделите все буквы и нажмите клавишу A в верхнем меню.

скриншот

13. Быстрая вставка рамки для текста

Чтобы отделить текст от фона, можно добавить рамку. Для этого нужно нажать OPTION + SHIFT + B или ALT + SHIFT + B.

Если нужно увеличить ее толщину, нажмите OPTION (ALT) + SHIFT + =, чтобы сделать границу более толстой. Или OPTION (ALT) + SHIFT — =, чтобы сделать ее тоньше.

14. Сохранение пропорций на изображениях

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

15. Создание тени для текста

Введите нужный текст и выделите его. Затем нажмите кнопку «Дублировать» в верхнем правом меню или сочетание клавиш COMMAND + C. Далее можно изменить цвет одного из текстовых полей и расположить его слева или справа от исходного, чтобы создать тень.

скриншот

16. Быстрые объекты

В сервисе предусмотрены сочетания клавиш, которые позволяют быстро создавать некоторые геометрические элементы. Например, нажмите R, чтобы создать прямоугольник, L — линию, C — круг.

Фото на обложке: Rawpixel.com / Shutterstock

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тени

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

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

1. Быстрый выбор объекта

2. Поиск бесплатных шаблонов

3. Быстрый доступ к текстовому полю

4. Свободное перемещение элемента

5. Группировка элементов

6. Быстрая отмена и повтор действия

7. Нестандартный шрифт

8. Перемещение элементов с помощью клавиш со стрелками

9. Быстрое изменение масштаба

10. Использование рамок

11. Оптимизация для различных платформ

12. Преобразование текста в верхний или нижний регистр

13. Быстрая вставка рамки для текста

14. Сохранение пропорций на изображениях

15. Создание тени для текста

16. Быстрые объекты

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