(Вырезать фигуру)Основная ответственность передних разработчиковUIЧертеж преобразуется в реальную используемую страницу, и степень восстановления рендеринга в значительной степени определяетUIа такжеPMудовлетворение
В нормальных условиях, после получения проекта проекта, те, кто ленив, могут напрямую открыть программное обеспечение, посмотрев на картинку, и измерение расстояния будет запущено невооруженным глазом, а ответственные будут открыты.PSили более формальныйPhotoshop, пытаясь быть точнымpx, Эти два метода имеют свои преимущества и недостатки, первый имеет высокую вероятность беспокойства о степени восстановления, второй требует много времени и труда, может ослепить глаза и, в конце концов, может не пройти пиксельные глаза дизайнера
Я не талантливый, я умею зорко и хорошо измерять расстояние невооруженным глазом.Если не слишком жестко смотреть на разницу в уровне пикселей, то вполне достаточно для пересечения.Однако бывают непредвиденные обстоятельства .Конструкторский отдел компании в последнее время увеличил степень восстановления эскизного проекта.Энтузиазм вызвал увеличение частоты качания головой между мной и дизайнером по прямой линии.Походив туда-сюда,я был измотан.Поразмыслив об этом осторожно, это не было долгосрочным решением, поэтому я решил решить эту проблему от первопричины.
uipx-chrome-plugin
невооруженным глазом иPSИзмерение имеет свои преимущества и недостатки.Лучше всего отказаться от шлака и объединить преимущества этих двух.Преимущество измерения невооруженным глазом заключается в том, что оно короткое, плоское и быстрое, но недостаток в том, что он недостаточно точен.PSПреимущество ранжирования в том, что оно достаточно точное, а недостаток в том, что оно слишком медленное, и уже слишком поздно для удовлетворения потребности в наверстывании, поэтому оно должно быть и быстрым, и точным.
Тогда, если положить восстановленную рукопись изPSПереход на страницу в разработке, плюс некоторые необходимые вспомогательные возможности, типа ранжирования, разве это не решает вышеуказанные проблемы?
В целом, независимо от развитияPCБудь то страница на стороне или страница на мобильной стороне, мы все привыкли кPCОтладка в браузере, раз уж это браузер, то в первую очередь думаю о расширениях для браузера
Этот плагин должен иметь следующие функции:
- ранжирование
Измерьте разницу в положении и размере элемента между черновиком дизайна и картой восстановления страницы, аналогично
PSлинейка для легкой регулировки - инвертировать
Один для облегчения сравнения различий, а другой для пикселя, чтобы инвертировать его и установить прозрачность на
0.5После того, как пиксели смешаны и перекрыты, составной цвет станет серым, что является очень интуитивным фактором для определения того, одинаковые пиксели или нет. - Регулировка прозрачности Один из них предназначен для облегчения сравнения различий, а другой — для помощи в инверсии.
- Перетащите проект дизайна пользовательского интерфейса Удобно сравнивать различия
- Точная настройка положения Дополнение к функции перетаскивания дизайна пользовательского интерфейса
- Прозрачные ненужные значения цвета Например, для эскиза дизайна, если его фон белый, то при сравнении белый фон может быть полностью прозрачным, экспонируются только основные элементы, исключается интерференция ненужных элементов.
Итак, можно сначала перейти к рендерам:
С точкой спроса и проектным проектом реализация очень проста
этоchromeПлагин расширения в основном разделен на три части
popup
То есть картинка выше, страница, которая появляется после нажатия мышкой на иконку расширения в правом верхнем углу браузера
Эта страница представляет собой уровень представления, интеграцию нескольких функций, упомянутых выше, в ответ на действия пользователя, в основном страницу рисования и регистрации событий.
content
Код, введенный на фактической странице разработки для ответаpopupДействия
Самая удобная передняя рабочая картинкаcanvas, нарисовав дизайн наcanvasВы можете легко достичь вышеупомянутых нескольких функциональных точек
Этот скрипт добавляетcanvasЭлемент и носитель реализуют функции точки проектирования, такие как инверторы, все прозрачны в этомcanvasосуществленный
background
Этот скрипт используется в качестве библиотеки кэша данных, потому чтоpopupЖизненный цикл очень короткий.Он генерируется при отображении, и уничтожается при исчезновении.Значение переменной не может долго сохраняться.Его нужно сохранять косвенно через этот скрипт.
Работа плагина зависит от взаимной связи этих трех частей.Код ядра очень прост, поэтому больше говорить не буду.Если интересно,можете прочитать сами.Адрес источника
uipx-webpack-plugin
из-заuipx-chrome-pluginЯвляетсяchromeПлагин расширения , нельзя использовать на мобильном терминале, а мобильный терминал - это почти все сцены, которые я разрабатываю сейчас, некоторые неудобны, хотя вообще говоря, он тоже вchromeРазработка мобильного терминала была завершена под смоделированное мобильное устройство, но всегда было некомфортно без фактической установки его на реальную машину, поэтому, вдохновленный моими друзьями, я решилuipx-chrome-pluginпревратиться вwebpackПлагин, выражение прямо(копия)Ссылаться наvconsole-webpack-plugin
В основном конкретные принципы иuipx-chrome-pluginПочти, но платформаAPIРазница не в чем, к тому же этот плагин полностью сквознойjsвпрыскивают, так тоже не нравитсяuipx-chrome-pluginкоторый может напрямую писатьhtml, но это легко решить
Этот плагин был опубликован дляnpm, Вы можете напрямую загрузить исходный код, который также был загружен наGithubТе, кому интересно, может скачать и использовать
резюме
Эти два плагина не сложны на уровне кода, но они действительно могут решить практические задачи.Такое колесо все еще можно построить.Кроме того, разница между кодом колеса и обычным бизнес-кодом все еще относительно велика. , который может лучше отражать человека. Уровень и стиль кодирования без оков бизнеса имеют больше возможностей для игры при написании кода, что можно рассматривать как способ самоанализа.