С HTML5 и CSS3 уеб браузърите придобиха редица невероятни технологии: 3D графика , гнезда, конци и др. С тях уеб приложенията могат да се възползват от някои от най-сложните възможности на компютрите и операционните системи, на които се използват. Уеб браузърът предлага a здрава гъвкава екосистема за разработване на приложения, което е видно от скорошния възход на множество мощни уеб приложения, без които не можем да живеем. Все пак нещо, което все още липсва, е красотата на HTML анотирането и декорацията на текста. Какво е декорация на текст? Капризно подчертаване, груби акценти и вълнообразни зачерквания са някои от нещата, за които уеб браузърите не осигуряват естествена поддръжка. Това може да звучи по-сложно, отколкото полезно, но възможността за Разработчици на JavaScript създаването на тези стилове може да се окаже полезно в аспекти като ресурси за електронно обучение и уеб базирани четци на електронни книги. Освен това, това може да допринесе за подобряване на потребителския опит в уеб приложенията, които се въртят около принципите на естествения дизайн. Най-малкото изграждането на такъв инструмент е забавно и дава представа за многото странности на уеб браузъра.
Разработчиците са намерили много решения за ограничаването на уеб браузъра. Много от тези решения включват използването на CSS по по-малко интуитивен начин, тъй като някои използват изображения в псевдоелементите „:: after“. Това работи, но поддържането на много изображения за всяка двойка стил-цвят често се оказва трудно. Тази статия разглежда анатомията на JavaScript библиотека, която се опитва да реши елегантно този проблем.
как да получите текущата дата и час в javascript
Библиотеката е с отворен код и е достъпна на GitHub: Анотатор на текст
Общ преглед
При разработването на тази библиотека беше обърнато специално внимание на осигуряването на съвместимост с най-популярните уеб браузъри (включително IE 9+). Въпреки това, за разлика от това как повечето решават този проблем, библиотеката не разчита на конкретно неясни CSS трикове; или по-лошо, специално Unicode символи . Вместо това използва SVG, за да постигне много по-добри, по-изчистени декорации на текст.
По принцип библиотеката изпълнява Annotator “клас”, който може да се използва за автоматично създаване на DIV елементи, позиционирането им под текстове, които да бъдат отбелязани, и запълване на фона им с SVG изображения. Могат да се комбинират множество DIV за по-нататъшно персонализиране на декорациите. Подходът е съвместим с различни браузъри, осигурява гъвкавост при позициониране на декоративни елементи и позволява по-лесно разширение с персонализирани шаблони.
Библиотеката е разработена с помощта на Google Closure Tools, тъй като е модулна и с различни браузъри, което помага за създаването на компактен и бърз JavaScript код без допълнителна зависимост.
Архитектура
Библиотеката е проектирана като колекция от 'класове' на JavaScript и излага всички необходими функционалности на потребителя чрез Annotator за 'класа':
Ето кратко описание на наличните функционалности:
-
annotateDocument - анотира елементи, които са маркирани с атрибут “data-annotate”.
-
подчертаване - подчертава елемент
-
акцент - подчертава елемент
-
strike - елемент за удари
-
underlineSelected - подчертава избрания текст
-
highlightSelected - подчертава избрания текст
как се използват принципите и елементите на визуалния дизайн
-
strikeSelected - зачерква избран текст
-
unannotateElement - премахва анотацията от елемента
-
getTemplates - връща речник на шаблони за пояснения
-
setUnderlineOptions - задава настройки за подчертаващ анотатор
-
setHighlightOptions - задава настройки за подчертаващия анотатор
-
setStrikeOptions - задава настройки за анотатора на стачка
Класът на анотатора съдържа три екземпляра на клас AnnotatorImpl за всяка функция за анотиране: подчертаване, подчертаване и зачеркване.
tvs.Annotator = function() { this.underliner_ = new tvs.AnnotatorImpl( 'underliner', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.underlinePositioner); this.highlighter_ = new tvs.AnnotatorImpl( 'highlighter', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.highlightPositioner, {opacity: 0.45}); this.striker_ = new tvs.AnnotatorImpl( 'striker', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.strikePositioner); }; Екземплярите AnnotatorImpl се създават с различни идентификатори и помощни обекти на позиционера. Предадените идентификатори се използват по-късно в имена на класове CSS и имена на вътрешни полета, изисквайки идентификаторите да бъдат уникални. Също така се предава препратка към списък с известни шаблони (може да се промени по-късно).
Всеки обект на позиционер е изпълнение на интерфейс IPositioner, който има само метода “getPosition” и изглежда по следния начин:
sephora продава козметика и продукти за красота в магазини и чрез sephora.com. това илюстрира
/** * Underline positioner * @implements {tvs.IPositioner} */ tvs.AnnotatorCore.underlinePositioner = /** @type {!tvs.IPositioner} */ ({ /** * @param {Object} elementRect * @param {number} annotationHeight * @return {{left: number, top: number, width: number, height: number}} */ getPosition: function(elementRect, annotationHeight) { return { width: elementRect.width, height: annotationHeight, left: elementRect.left, top: elementRect.bottom - (elementRect.height * 0.1) }; } }); Това позволява всеки шаблон да се използва с подчертаващ, подчертаващ или зачеркващ текст с анотации. Когато към елемент се приложи анотация, ограничителното поле за елемента се получава чрез извикване на „getElementRects“, както е показано по-долу:
var rects = elemOrEv.getClientRects(); Този метод връща колекция от правоъгълници, които показват ограничаващите правоъгълници за всяко поле в клиент. След като предадем всеки рект на конкретен позиционер, ще получим граници на дестинацията.
Шаблони за анотации на текст в SVG
Както бе споменато по-горе, има само един набор от шаблони, които се използват за всички видове SVG текстови анотации. Всеки шаблон се състои от части на шаблона. Част от шаблон е обект, който представлява съдържанието на детайла, ширината на шаблона и режим на теглене.
Съдържание
Съдържанието е набор от SVG елементи, представени като низ. Тъй като това съдържание няма корен SVG възел, където са зададени ширината и височината на прозореца (в пиксели), конструкторът на част на шаблона ги приема като параметри. Например можете да посочите размера на прозорец за гледане като 100px x 100px и да начертаете линия до (50, 50) и (25, 25). След като анотацията бъде приложена, всички svg елементи ще бъдат правилно оразмерени до желания размер. Стойността на съдържанието може да използва низа „{0}“, който ще бъде заменен с цвета, избран от потребителя.
Следващият SVG изобразява диагонална линия. Ще използваме това като една от частите в примерен стил на анотация, следван след малко:
var t = new tvs.Template(new tvs.SvgTemplatePart( '' + '', 20, 20, 'repeat' )) Ширина
Ширината на шаблона е низ, който може да бъде „*“, „височина“ или нещо друго:
-
„*“ Задава ширината на всички елементи със звезда, равна помежду си
-
“Height” задава ширината, равна на височината на елемента за пояснение
Всичко останало, зададено тук, ще бъде директно зададено на свойства на CSS ширина и минимална ширина.
Режим на рисуване
Режимът на теглене е низ, който може да бъде „повторение“ или „разтягане“. Както показват стойностите, ако го зададете на „повторение“, съдържанието ще се повтори, докато настройката на „разтягане“ ще разтегли съдържанието.
Ето пример за това какво можем да постигнем чрез конфигуриране на тези три параметъра:
Текстовата анотация в примера по-горе съдържа 4 части. Първата част е диагоналната линия, като ширината на шаблона е зададена на „височина“, а режимът на чертане е зададен на „повторение“. Във втората част ширината на шаблона е зададена на „*“, а режимът на теглене е зададен на „повторение“. Третата част е настроена да бъде широка „15px“ и да бъде изтеглена в режим „повторение“. И накрая, ширината на последната част е зададена на „*“, а режимът на изтегляне е зададен на „разтягане“.
Когато тези ширини се изчисляват, първата част отнема 5 пиксела (равна на височината на елемента за пояснение), третата част отнема 15 пиксела (както е зададено), а останалото пространство е разделено по равно между втората и четвъртата части.
google cloud API за естествен език
Когато едно и също парче текст е подчертано с помощта на същия шаблон, получаваме това:
Както можете да кажете, височината на елемента за пояснение е по-голяма, както и ширината на първата част (тъй като ширината на шаблона за тази част е зададена на „височина“). Естествено, ширината на третата част остана непроменена от предишния пример.
Прилагането на ефект на зачеркване към същия текст със същия шаблон води до резултат, много подобен на първия. Единствената разлика е местоположението, където са разположени елементите за пояснение:
Въпреки че тези текстови анотации изглеждат сложни (начинът, по който изглеждат, с четири отделни части), всички те използват много прости SVG елементи. Като допълнителен пример, правенето на криволичеща линия изисква една част, със следното, просто SVG съдържание:
tvs.AnnotatorDictionary.svgTemplates['brush'] = new tvs.Template(new tvs.SvgTemplatePart( svgContent, 50, 50, '*', 'stretch' )); Когато тези шаблони бъдат оценени, съдържанието се преоразмерява и „{0}“ се заменя автоматично с посочения цвят. Още повече, добавянето на нови шаблони е толкова просто, колкото добавянето им към JavaScript обект:
калкулатор на часова ставка за независим изпълнител
Резултати
Всяка анотация се прилага чрез добавяне на елемент div с абсолютно позициониране към страницата:
tvs.SvgTemplatePart.prototype.getBackground = function(color) { var image = tvs.AnnotatorCore.formatString(this.content, [color]); var encodedSVG = goog.crypt.base64.encodeString(image); return 'data:image/svg+xml;base64,' + encodedSVG; }; Елементът div се попълва с таблица, където всяка добавена клетка съответства на една от частите в шаблона. Съдържанието на всяка част от шаблона се добавя като URI на кодирани данни Base64, като се прилага избраният цвят:
var annotator = new tvs.Annotator(); annotator.underlineSelected(); Вграждане
За по-добро потребителско изживяване, особено когато се опитвате да използвате тази библиотека на JavaScript с области, които могат да се редактират, е важно Text Annotator да знае границите на текста, избран в момента от потребителя. Rangy , чиста JavaScript библиотека, занимаваща се с обхват и избор, е използвана, за да постигне това по начин на кръстосан браузър. Rangy предоставя прост API, базиран на стандарти, за изпълнение на общи задачи за обхват и избор на DOM във всички основни браузъри, абстрахирайки диво различните изпълнения на тази функционалност между Internet Explorer и съвместими с DOM браузъри. Това е единствената зависимост на проекта.
След като Text Annotator е вграден, използването му е много прост подвиг:
annotator.unannotateElement(annotatedElement); Всеки анотиран елемент е маркиран с клас “tvs-annotated-text” и всеки елемент за анотация има клас “tvs-annotate-element”. Премахването на поясненията е още по-просто, еднолинейно:
tvs.AnnotatorImpl = function(id, templates, positioner, options) { // ... this.throttle = new goog.Throttle(goog.bind(this.refreshAllAnnotations, this), 50); tvs.AnnotatorCore.registerForWindowResize( this.id,goog.bind(this.throttle.fire, this.throttle)); }; tvs.AnnotatorImpl.prototype.refreshAllAnnotations = function() { var elems = goog.dom.getElementsByClass(this.getCssClassForAnnotated()); var refFunc = goog.bind(this.refreshAnnotation, this); goog.array.forEach(elems, refFunc); }; Странности
Когато прозорецът бъде преоразмерен, елементите могат да се придвижват, изисквайки анотираните елементи да бъдат „опреснени“. С това се занимава библиотеката. Въпреки това; за да се намали въздействието върху производителността, повикването към освежаващи пояснения се ограничава:
data-annotate='underline squiggly green' След опресняване елементите на анотациите могат да бъдат добавени, преоразмерени или премахнати от страницата, както се изисква.
Удобство
За да улесните анотирането на статичен текст на страница, всичко, от което се нуждаете, е прост атрибут за данни на елемента контейнер:
|_+_|
Това ще анотира съдържанието на елемента с лъскаво зелено подчертаване.
Заключение
Какво повече мога да кажа за този SVG текстов урок? Забавен, но мощен инструмент е лесно внедрен. Не мисля, че бихме спечелили много, като осигурим поддръжка за Internet Explorer 8, тъй като вместо това може да усложним цялото изпълнение. Въпреки това, с някои подобрения и малко работа върху ядрото, можем да разширим библиотеката, за да можем да създаваме декоративни рамки за нетекстови елементи. Освен това може да е интересна задача да внедрите някакъв механизъм за запазване и по-късно възстановяване на състоянието на редактируемото съдържание на анотация.
Засега възможностите са ограничени само от вашето въображение (и възможностите на браузъра). Може би искате линии за микропечат, градиенти или дори анимации. С Анотатор на текст , можеш.
