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

[x11]

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

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

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

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

Спасибо.

[Sherzod]

20 hours ago, x11 said:

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

[x11]

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

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

[Sherzod]

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'
}

 

[Sherzod]

Это быстрое решение..., нужно учитывать еще несколько моментов.

[Sherzod]

Еще можно так:

... height: auto; ...

 

[x11]

Теперь усложняем. Мне это затемнение с текстом требуется создать и показать программно в 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;

 

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

[Sherzod]

3 minutes ago, x11 said:

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

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

[x11]

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

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

[Sherzod]

2 minutes ago, x11 said:

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

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

[Sherzod]

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;

 

[x11]

И в очередной раз Спасибо!

[x11]

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

[Sherzod]

1 hour ago, x11 said:

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

Да, я ожидал этот вопрос. Сейчас сделаем.

[Sherzod]

1 hour ago, x11 said:

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

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

 

[x11]

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

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

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

[x11]

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

[x11]

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

[Sherzod]

2 hours ago, x11 said:

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

1. 

Uses ..., ExtPascalUtils;

2.  

StrToJS

 

[Sherzod]

57 minutes ago, x11 said:

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

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

[x11]

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

[Sherzod]

3 minutes ago, x11 said:

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

Добавьте в style:

word-break: break-all; 

или

word-break: break-word;

 

[Sherzod]

On 7/21/2020 at 2:50 PM, Sherzod said:

' style: ''position:absolute; top:0; width:100%; height:auto; padding:10px; background:rgba(0, 0, 0, 0.3); font-weight:bold; color:white;'',' +

Сюда.

[x11]

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

Перенес стиль в 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;
}