x11 Posted July 20, 2020 Share Posted July 20, 2020 Есть unimImage с картинкой. Как сверху на картинку положить, например, tunimMemo или другую "текстовую" компоненту, которая будет полупрозрачна и затемнена и которая сможет отобразить текст. В качестве текста планируется отображать имя/путь файла и другие параметры картинки, например, разрешение. На прикрепленном изображении виден пример, где часть картинки затемнена, чтобы текст был лучше виден. Спасибо. Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 20 hours ago, x11 said: Как сверху на картинку положить, например, tunimMemo или другую "текстовую" компоненту, которая будет полупрозрачна и затемнена и которая сможет отобразить текст. Link to comment Share on other sites More sharing options...
x11 Posted July 21, 2020 Author Share Posted July 21, 2020 Т.е. просто положить, но не указывать Align? Не могу понять, а как сделать полупрозрачность. Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 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 More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 Это быстрое решение..., нужно учитывать еще несколько моментов. Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 Еще можно так: ... height: auto; ... Link to comment Share on other sites More sharing options...
x11 Posted July 21, 2020 Author Share Posted July 21, 2020 Теперь усложняем. Мне это затемнение с текстом требуется создать и показать программно в 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 More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 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 More sharing options...
x11 Posted July 21, 2020 Author Share Posted July 21, 2020 Но создание UnimImage и загрузка картинок происходит при создании окна. А показ затемнения с текстом нужно реализовать по нажатию на кнопку Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 2 minutes ago, x11 said: А показ затемнения с текстом нужно реализовать по нажатию на кнопку Ну, можно конечно. Я проанализирую... Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 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; 1 Link to comment Share on other sites More sharing options...
x11 Posted July 21, 2020 Author Share Posted July 21, 2020 И в очередной раз Спасибо! 1 Link to comment Share on other sites More sharing options...
x11 Posted July 21, 2020 Author Share Posted July 21, 2020 А как теперь скрыть/удалить этот текст? Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 1 hour ago, x11 said: А как теперь скрыть/удалить этот текст? Да, я ожидал этот вопрос. Сейчас сделаем. Link to comment Share on other sites More sharing options...
Sherzod Posted July 21, 2020 Share Posted July 21, 2020 1 hour ago, x11 said: А как теперь удалить этот текст? procedure TMainmForm.UnimButton3Click(Sender: TObject); begin UnimImage1.JSInterface.JSCode('if ('#1'.htmlTextEl) {'#1'.htmlTextEl.remove(); '#1'.htmlTextEl=null};'); end; 1 Link to comment Share on other sites More sharing options...
x11 Posted July 22, 2020 Author Share Posted July 22, 2020 Ещё одна проблема вылезла. Как оказалось наклоная черта "\" из текста удаляется Т.е. вместо "E:\foto\2020" отображется "E:foto2020" Link to comment Share on other sites More sharing options...
x11 Posted July 22, 2020 Author Share Posted July 22, 2020 а есть в JS или в ExtJS, или в uniGUI готовая (стандартная) функция, которая экранирует сразу все специальные символы, т.е. что-то типа конвертации из delphi-string в js-string? Link to comment Share on other sites More sharing options...
x11 Posted July 22, 2020 Author Share Posted July 22, 2020 Ещё один вопрос. Возможен ли автоматический перенос по словам и/или симвлоам, т.к. некоторые строки не влазят? Link to comment Share on other sites More sharing options...
Sherzod Posted July 22, 2020 Share Posted July 22, 2020 2 hours ago, x11 said: а есть в JS или в ExtJS, или в uniGUI готовая (стандартная) функция, которая экранирует сразу все специальные символы, т.е. что-то типа конвертации из delphi-string в js-string? 1. Uses ..., ExtPascalUtils; 2. StrToJS 1 Link to comment Share on other sites More sharing options...
Sherzod Posted July 22, 2020 Share Posted July 22, 2020 57 minutes ago, x11 said: Возможен ли автоматический перенос по словам и/или симвлоам, т.к. некоторые строки не влазят? Мне кажется, здесь по умолчанию стоит перенос... Можете еще раз уточнить Ваш случай? Link to comment Share on other sites More sharing options...
x11 Posted July 22, 2020 Author Share Posted July 22, 2020 Перенос не по словам. А по символам есть? Т.е. строка без пробелов и она не влазит. Link to comment Share on other sites More sharing options...
Sherzod Posted July 22, 2020 Share Posted July 22, 2020 3 minutes ago, x11 said: Перенос не по словам. А по символам есть? Т.е. строка без пробелов и она не влазит. Добавьте в style: word-break: break-all; или word-break: break-word; 1 Link to comment Share on other sites More sharing options...
Sherzod Posted July 22, 2020 Share Posted July 22, 2020 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;'',' + Сюда. 1 Link to comment Share on other sites More sharing options...
x11 Posted July 23, 2020 Author Share Posted July 23, 2020 Все получилось, спасибо. Перенес стиль в 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; } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now