Jump to content

Полупрозрачный текст на картинке


x11

Recommended Posts

Есть unimImage с картинкой.

Как сверху на картинку положить, например, tunimMemo или другую "текстовую" компоненту, которая будет полупрозрачна и затемнена и которая сможет отобразить текст.

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

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

Спасибо.

555.jpg

Link to comment
Share on other sites

20 hours ago, x11 said:

Как сверху на картинку положить, например, tunimMemo или другую "текстовую" компоненту, которая будет полупрозрачна и затемнена и которая сможет отобразить текст.

imageText.thumb.png.7fdfe833935a0825fe197df9978b1c4c.png

Link to comment
Share on other sites

Т.е. просто положить, но не указывать Align?

Не могу понять, а как сделать полупрозрачность.

Link to comment
Share on other sites

3 minutes ago, x11 said:

Т.е. просто положить, но не указывать Align?

function afterCreate(sender)
{
    sender.htmlTextEl = Ext.DomHelper.append(sender.element.select('.x-innerhtml').elements[0], {
        tag: 'div', 
        style: 'position:absolute; top:0; width:100%; height:150px; padding:10px; background:rgba(0, 0, 0, 0.3); font-weight:bold; color:white;', 
        id: sender.id + '_textEl', 
        html: sender.htmlText
    });
    
    sender.setHTMLText = function(htmlText) {
        sender.htmlTextEl.innerHTML = htmlText
    };
}
function beforeInit(sender, config)
{
    config.htmlText = 'TEST'
}

 

Link to comment
Share on other sites

Теперь усложняем. Мне это затемнение с текстом требуется создать и показать программно в run-time.

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

Ошибок не обнаруживаю, но полупрозрачная надпись с текстом не появляется. Прошелся отладчиком - все строки процедуры "PhotoInfo" выполняются, но надпись не появляется.

 

Вопрос в том, нужно ли выполнять какие-то refresh/update?

procedure TfmmParentAparts.PhotoInfo(const txt: string);
const
 cAfterCreate = 'function afterCreate(sender) ' +
                '{' +
                '    sender.htmlTextEl = Ext.DomHelper.append(sender.element.select(''.x-innerhtml'').elements[0], {' +
                '        tag: ''div'',' +
                '        style: ''position:absolute; top:0; width:100%; height:auto; padding:10px; background:rgba(0, 0, 0, 0.3); font-weight:bold; color:white;'',' +
                '        id: sender.id + ''_textEl'',' +
                '        html: sender.htmlText' +
                '    });' +
                '    sender.setHTMLText = function(htmlText) {' +
                '        sender.htmlTextEl.innerHTML = htmlText' +
                '    };' +
                '}';
Var
 UnimImage: TUnimImage;
 UnimCarouselPage: TUnimCarouselPage;
 i: integer;
begin
  if not Assigned(carouselPhotos.ActivePage) then
    exit;

  UnimCarouselPage := carouselPhotos.ActivePage;

  //найти дочернюю картинку, которая лежит на carouselPhotos.ActivePage
  for I := 0 to pred(UnimCarouselPage.ComponentCount) do
    if UnimCarouselPage.Components[i] is TUnimImage then
    begin
      UnimImage := UnimCarouselPage.Components[i] as TUnimImage;
      UnimImage.ClientEvents.UniEvents.Values['afterCreate'] := cAfterCreate;
      UnimImage.ClientEvents.UniEvents.Values['beforeInit']  := 'function beforeInit(sender, config){config.htmlText = ' + QuotedStr(txt) + '}';
    end;

end;

 

Что может быть не так в моем коде?

Link to comment
Share on other sites

3 minutes ago, x11 said:

UnimImage.ClientEvents.UniEvents.Values['afterCreate'] := cAfterCreate; UnimImage.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config){config.htmlText = ' + QuotedStr(txt) + '}';

Эти события должны назначаться во время инициализации (создании) компонента.

Link to comment
Share on other sites

Но создание UnimImage и загрузка картинок происходит при создании окна.

А показ затемнения с текстом нужно реализовать по нажатию на кнопку :sad:

Link to comment
Share on other sites

2 minutes ago, x11 said:

А показ затемнения с текстом нужно реализовать по нажатию на кнопку :sad:

Ну, можно конечно. Я проанализирую...

Link to comment
Share on other sites

procedure TMainmForm.UnimButton2Click(Sender: TObject);
begin
  UnimImage1.JSInterface.JSCode(
  '    var sender='#1 + ';' +
  '    if (!sender.htmlTextEl) {'+
  '        sender.htmlTextEl = Ext.DomHelper.append(sender.element.select(''.x-innerhtml'').elements[0], {' +
  '            tag: ''div'',' +
  '            style: ''position:absolute; top:0; width:100%; height:auto; padding:10px; background:rgba(0, 0, 0, 0.3); font-weight:bold; color:white;'',' +
  '            id: sender.id + ''_textEl'',' +
  '            html: sender.htmlText' +
  '        });' +
  '    }'+
  '    sender.htmlTextEl.innerHTML = "' + 'TEST' + '";'
  );
end;

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, x11 said:

А как теперь удалить этот текст?

procedure TMainmForm.UnimButton3Click(Sender: TObject);
begin
  UnimImage1.JSInterface.JSCode('if ('#1'.htmlTextEl) {'#1'.htmlTextEl.remove(); '#1'.htmlTextEl=null};');
end;

 

  • Like 1
Link to comment
Share on other sites

Ещё одна проблема вылезла.

Как оказалось наклоная черта "\" из текста удаляется :sad:

Т.е. вместо "E:\foto\2020" отображется "E:foto2020"

Link to comment
Share on other sites

а есть в JS или в ExtJS, или в uniGUI готовая (стандартная) функция, которая экранирует сразу все специальные символы, т.е. что-то типа конвертации из delphi-string в js-string?

Link to comment
Share on other sites

Ещё один вопрос. Возможен ли автоматический перенос по словам и/или симвлоам, т.к. некоторые строки не влазят?

Link to comment
Share on other sites

2 hours ago, x11 said:

а есть в JS или в ExtJS, или в uniGUI готовая (стандартная) функция, которая экранирует сразу все специальные символы, т.е. что-то типа конвертации из delphi-string в js-string?

1. 

Uses ..., ExtPascalUtils;

2.  

StrToJS

 

  • Like 1
Link to comment
Share on other sites

57 minutes ago, x11 said:

Возможен ли автоматический перенос по словам и/или симвлоам, т.к. некоторые строки не влазят?

Мне кажется, здесь по умолчанию стоит перенос... Можете еще раз уточнить Ваш случай?

Link to comment
Share on other sites

3 minutes ago, x11 said:

Перенос не по словам. А по символам есть? Т.е. строка без пробелов и она не влазит.

Добавьте в style:

word-break: break-all; 

или

word-break: break-word;

 

  • Like 1
Link to comment
Share on other sites

Все получилось, спасибо.

Перенес стиль в CSS

procedure PhotoInfoShow(UnimImage: TUnimImage);
const
  constHTMLTagPo = '<p>';
  constHTMLTagPc = '</p>';
var
  ImgSize: TImgSize;
  txt: string;
begin
  ImgSize.w := UnimImage.Picture.Width;
  ImgSize.h := UnimImage.Picture.Height;
  ImgSize.s := GetFileSize(UnimImage.Hint);

  txt := constHTMLTagPo + UnimImage.Hint + constHTMLTagPc + 
         constHTMLTagPo + ExtractFileName(UnimImage.Hint) + constHTMLTagPc + 
         constHTMLTagPo + ImgSize.w.ToString + 'x' + ImgSize.h.ToString + constHTMLTagPc + 
         constHTMLTagPo + FloatToStrF(ImgSize.s / 1024, ffFixed, 8, 2) + ' Kb' + constHTMLTagPc;

  txt := ExtPascalUtils.StrToJS(txt);


  UnimImage.JSInterface.JSCode(
  '    var sender='#1 + ';' +
  '    if (!sender.htmlTextEl) {' +
  '        sender.htmlTextEl = Ext.DomHelper.append(sender.element.select(''.x-innerhtml'').elements[0], {' +
  '            tag: ''div'',' +
  '            id: sender.id + ''_textEl'',' +
  '            class: ''imgCarousel'',' +
  '            html: sender.htmlText' +
  '        });' +
  '    }' +
  '    sender.htmlTextEl.innerHTML = ' + txt + ';');

  UnimImage.Tag := 1;
end;

 

 

CSS

.imgCarousel{
	position:absolute;
	top:0;
	width:100%;
	height:auto;
	padding:10px;
	background:rgba(0, 0, 0, 0.3);
	font-weight:bold;
	color:white;
	word-break: break-all;
}

 

  • Like 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...