Как сделать тень в canva
Как сделать тень в canva
Как нарисовать на 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]
Еще был бы неплохой эффект, если бы удалось нарисовать сначало черный прямоугольник размером с фото, но немного сместив вправо и вниз (это если воображаемый свет светит слева-сверху). Затем размыть его, скажем, по Гауссу, а потом поверх нарисовать непосредственно само фото. Тень получается очень приличная, в фотошопе, по крайней мере. А что мешает сделать то же самому?
Только вот насчет Гаусса посоветовать ничего немогу, не писал его еще. Спрашивай, может у кого готовая процедурка есть.
Что-то я не о том подумал, после прочтения вопроса, для тебя размытие, видимо, не так важно, ты говоришь полупрозрачную тень или градиентную?
Ну с полупрозрачной проблем нет, все просто:
— выбираем коэффициентпрозрачности, скажем 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]
Спасибо, попробую. Там даже пример есть.
//рисование тени от текста или прямоугольника
<$R-,B-,S->
program ten;
uses windows, graphics, sysutils, classes;
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]
← →
Fenik © ( 2006-02-10 00:29 ) [9]
HTML5 Canvas: Добавление теней
На холсте HTML5 вы можете добавлять тени на фигуру, линию, текст или изображение, которые могут создать ощущение третьего измерения. Чтобы добавить тени с помощью HTML5 Canvas, вы можете использовать следующие свойства контекста Canvas.
Свойство shadowOffsetX ()
Свойство используется для получения или установки горизонтального расстояния тени от фигуры. Вы можете использовать положительные или отрицательные значения, чтобы контролировать положение тени. Значение по умолчанию равно нулю.
Синтаксис:
Свойство shadowOffsetY ()
Свойство используется для получения или установки вертикального расстояния тени от фигуры. Вы можете использовать положительные или отрицательные значения, чтобы контролировать положение тени. Значение по умолчанию равно нулю.
Синтаксис:
Свойство shadowColor ()
Свойство используется для получения или установки цвета, используемого для теней.
Синтаксис:
Свойство shadowBlur ()
Свойство используется для получения или установки текущего уровня размытия, применяемого к теням.
Синтаксис:
Пример: HTML5 Canvas с добавлением тени
Следующий веб-документ создает серию квадратов с разной степенью размытия тени.
Выход:
Вот еще один пример:
Выход:
Пример: HTML5 Canvas добавляет тень на текст
Следующий веб-документ создает тень на текст.