Попрощайтесь с громоздкими PSD и с легкостью выполняйте измерения

причина

Для фронтенд-инженера ежедневная разработка неотделима от psd-файлов.

А вот небольшая всплывающая страничка для ежедневной разработки, ее psd на самом деле нужно30+Mb, поэтому вам часто приходится регулярно очищать psd...

Для меня, новичка в PS, использование PSD — это не более чем простые функции, такие как измерение размера элемента (расстояние между элементами) и просмотр атрибутов.

Мышление, контраст

По сравнению с эскизом, эскиз имеетsketch-measure, дизайнер может экспортировать его как статический ресурс во внешний интерфейс.

Для PSD на рынке уже есть pxcook / lanhuapp, и опыт тоже очень хороший, но вам нужно скачать (огромный) psd, предоставленный одноклассниками U, чтобы отметить опыт.

А иногда нам еще нужно, чтобы одноклассники U отдали (огромные) файлы PSD, прежде чем мы сможем их автоматически отметить в pxcook/lanhuapp.

Так что с учетом вышеизложенного рассмотрите возможность создания проекта с открытым исходным кодом, похожего на sketch-measure, позиционируемого как psd-measure.

Показать результаты

DEMO

исходный код

Командная строка

Мы также можем использовать командную строку для экспорта аннотаций страницы.

bash

npm i measure-export-cli -g
# 开启服务，在线预览 `path/to/psdDir` 下的 psd
measure-export start path/to/psdDir
# 构建 `path/to/psdDir` 下的 psd 至 `dist` 文件目录
measure-export build path/to/psdDir

Плагин Chrome

Предоставляет подключаемый модуль Chrome. Когда мы нажимаем ссылку psd, пользовательский интерфейс Measure выпрыгивает вместо загрузки PSD. Конечно, мы также можем щелкнуть загрузку в правом верхнем углу, чтобы загрузить.

Установить

1. скачать расширение,нажмите, чтобы скачать
2. Откройте страницу расширений Chrome: chrome://extensions/
3. Перетащите загруженный пакет на страницу для установки.
4. Этот значок показывает, что установка завершена

Дизайн и реализация

Процесс выглядит следующим образом:

Введение в формат файла PSD

• Заголовок файла (фиксированная длина) в основном включает общие данные файла psd, такие как версия, размер, количество каналов изображения и используемые цветовые категории (rgb, cmyk...)
• Раздел данных цветового режима (переменной длины) в основном используется для изображений некоторых цветовых типов.
• Ресурсы изображений (переменная) Поместите некоторые внешние ресурсы изображений
• Слой и маска (переменная длина) Размещайте различную информацию о слоях и масках, размере, положении, шрифте, обводке и т. д.
• Данные изображения (переменная) Поместите пиксельные данные изображения

PSD.js

Использование psd.js заключается в анализе вышеуказанной файловой структуры для получения удобочитаемой структуры данных. Среди них psd.js использует геттер для получения данных ленивого разбора, то есть следующий код:

const obj = Object.defineProperty({}, 'someParsedVal', {
  get: function () {
    if (!this._someParsedVal) {
      const afterMs = Date.now() + 3000
      while (true) {
        if (Date.now() >= afterMs) {
          this._someParsedVal = 'ok'
          break
        }
      }
    }
    return this._someParsedVal
  }
})

obj.someParsedVal // 3s 后出来
obj.someParsedVal // 很快

Аналогичная конструкция есть и в mobx3 (LazyInitializer)

psd-html

Разобрать PSD какHAST, который, в свою очередь, преобразуется в HTML

HAST (абстрактное синтаксическое дерево HTML)

Следующий html:

<a href="http://alpha.com" class="bravo" download></a>

Соответствующий HAST

{
  "type": "element",
  "tagName": "a",
  "properties": {
    "href": "http://alpha.com",
    "id": "bravo",
    "className": ["bravo"],
    "download": true
  },
  "children": []
}

Внешний и внутренний изоморфизм

Значение фронт-конца и заднего изоморфизма: работает на клиенте и сервере одновременно, в частности, в среде браузера и среды Nodejs одновременно.

Некоторые распространенные способы достижения изоморфизма внешнего и внутреннего интерфейса с помощью инструментов сборки браузера / свертывания / веб-пакета для упаковки js в разных средах.

Среда моделирования

• В среде nodejs дляnodejs built-in modulesбез упаковки
• В среде браузера упакованы встроенные модули по умолчанию, а также некоторые глобальные переменные (например,process.env / __dirname) тоже будет издеваться

Используйте подстановку переменных + treeshake, чтобы различать код в разных средах.

• как конфигурация веб-пакетаDefinePlugin

  {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.RUN_ENV': JSON.stringify('browser')
      })
    ]
  }
  

• Различие между упаковками различных сред в коде

  module.exports =
    process.env.RUN_ENV === 'browser'
      ? {
          psdToHtml,
          psdToHtmlFromBuffer,
          psdToHtmlFromURL,
          psdToHAST,
          psdToHASTFromBuffer
        }
      : {
          psdToHtml,
          psdToHtmlFromPath,
          psdToHtmlFromBuffer,
          psdToHAST,
          psdToHASTFromBuffer,
          psdToHASTFromPath
        }

• Окончательный упакованный js будет удаленpsdToHASTFromPathСвязанный код

package.jsonнастроить

следующим образом:

{
  "main": "dist/psd-html.cjs.js",
  "browser": "dist/psd-html.browser.cjs.js",
  "cdn": "dist/psd-html.browser.umd.min.js",
  "unpkg": "dist/psd-html.browser.umd.min.js"
}

• main: js загружается средой nodejs
• browser: js загружается средой браузера
• cdn: js загружается некоторыми службами cdn
• unpkg: js загружается службой unpkg cdn (в основном упаковано с использованием спецификации UMD)

прямое интервьюUN PK Geng.com/@Konjac aka/PSD…перенаправит наUN PK Geng.com/@Konjac aka/PSD…

html-измерение взаимодействия

позиционирование макета

Экспортируйте psd как полное изображение и используйте положение и размер каждого слоя для автоматического комментирования.

разное

2 div относительно абсолютного позиционирования одного и того же родителя, как определить, пересекаются ли они?

. . . . . . . . . .

Очень трудоемко сделать положительное и прямое суждение. Необходимо рассмотреть различные ситуации. В это время необходимо думать в обратном направлении и рассматривать непересекающиеся ситуации. это легко сейчас

Непересекающийся до тех пор, пока один из следующих четырех условий удовлетворен

function isIntersect(node1, node2) {
  const rect1 = node1.getBoundingClientRect()
  const rect2 = node2.getBoundingClientRect()
  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  )
}

measure-export(-cli)

ввод psd/html экспортmeas-uiСтатические ресурсы, процесс показан на рисунке (различаются среды prod и dev)

Todo

• Предоставляет плагин Chrome: когда браузер открывает psd, визуализирует пользовательский интерфейс размера измерения

Похожие материалы

• @moyuyc/psd.js- Разобрать файлы psd, форматировать (разветвлено изpsd.js)
• @moyuyc/psd-html - psd -> hast -> html
• html-measure- Взаимодействие с выноской
• meas-ui- Отображение пользовательского интерфейса переднего плана, включая взаимодействие с аннотациями
• measure-export(-cli)- ввод psd/html экспортаmeas-uiстатические ресурсы

использованная литература

• Adobe Photoshop File Formats SpecificationОфициальный стандарт для формата файлов PS
• Photoshop Styles File Format
• JS Как определить, пересекаются ли два прямоугольника
• HAST