Хватит определять размеры и углы объектов на экране на глаз! Online Ruler — это профессиональный инструмент, превращающий ваш экран в точное средство для физических измерений
🎉 Обновление v2.2.0: управление с клавиатуры и высокоточная настройка веб-линеек.
Измеряйте реальные размеры прямо на экране
Используйте онлайн-линейку для измерения длины на экране в сантиметрах, миллиметрах или дюймах. Откалибруйте её с помощью предмета известного размера, чтобы добиться точных измерений в масштабе 1:1.
Измерение углов с помощью виртуального транспортира
Наложите онлайн-транспортир на угол, изображенный на картинке, схеме или чертеже. Совместите центр транспортира с вершиной угла, а затем считайте значение по шкале — никаких дополнительных расширений или установки программ не требуется.
Измерение углов с помощью двух подвижных лучей
Установите вершину угла, а затем переместите оба луча так, чтобы они совпали со сторонами угла. Инструмент автоматически вычислит величину угла, что упрощает измерение различных произвольных углов на изображениях, схемах и проектных чертежах.
Откалибруйте экран, сопоставив его с реальными предметами — например, банковской картой, листом бумаги формата А4 или монетой. Система автоматически вычислит точное значение PPI (пикселей на дюйм) вашего дисплея. Используйте кнопки «+» и «-» для точной настройки с шагом в 1 пиксель.
Экранная линейка: поддерживает метрическую и имперскую системы мер; позволяет измерять длину, расстояния и размеры элементов прямо на странице.
Стандартный транспортир: полупрозрачный транспортир, который можно разместить на любой веб-странице. Он отображается в реальном физическом масштабе (на основе выполненной калибровки PPI) и может вращаться на 360°.
Динамический транспортир по трем точкам: измеряйте любой угол, задав вершину и две подвижные конечные точки. Инструмент поддерживает отображение угла в реальном времени, изменение длины измерительных лучей, полупрозрачную область сектора, а также настройку цвета и степени прозрачности.
Точное позиционирование: при выборе линейки используйте клавиши со стрелками для ее перемещения с шагом в 1 пиксель (или удерживайте Shift + клавиши со стрелками для перемещения с шагом в 10 пикселей) — это позволяет избежать неточностей, часто возникающих при перемещении мышью.
Работа с несколькими линейками: если на странице открыто несколько линеек, переключайтесь между ними с помощью клавиши Tab (или Shift + Tab).
Размещайте на одной странице сразу несколько линеек, стандартных или динамических транспортиров — это удобно для сложных сравнительных измерений и задач, связанных с геометрическим выравниванием.
Режим отдельного окна: линейка открывается в отдельном окне, которое всегда остается поверх остальных; его можно свободно изменять в размерах, а также переключать между горизонтальной и вертикальной ориентацией.
Режим наложения (оверлея): линейки или транспортиры отображаются как плавающие элементы прямо поверх веб-страницы; для них можно настроить степень прозрачности.
Выходите за рамки строгой горизонтальной или вертикальной ориентации: используйте специальный маркер вращения, чтобы задавать нужный угол в режиме реального времени.Линейки и стандартные транспортиры поддерживают привязку к ключевым углам (например, 45° или 90°) и отображают текущие числовые значения.
Каждая сторона трехточечного транспортира оснащена функцией независимой привязки с шагом 45°, что позволяет быстро выравнивать инструмент относительно горизонтальных, вертикальных и диагональных линий на любой веб-странице.
Эта функция имитирует защитный наконечник на обычных линейках, позволяя задать отступ (пустое пространство) от начала шкалы. Также предусмотрена возможность сброса настроек одним кликом для быстрого возврата к исходному положению.
Линейки представлены в различных вариантах исполнения — дерево, пластик, металл. Для их отображения используются динамические SVG-фильтры текстур, сочетающие профессиональный внешний вид с комфортом для глаз. Пластиковые линейки доступны в нескольких цветовых решениях.
Стандартные и трехточечные транспортиры имеют несколько полупрозрачных цветовых схем, что обеспечивает их хорошую видимость на фоне любого содержимого веб-страницы.
В трехточечном транспортире можно отдельно регулировать прозрачность секторной (веерообразной) области, сохраняя при этом четкую видимость линий, конечных точек и центра.
Метрическая система: шкалы в сантиметрах (см) и миллиметрах (мм).
Британская (имперская) система: шкалы в дюймах с высокой точностью деления (до 1/16 дюйма).
Изменение размера по всей длине: в режиме «внедрения» (injection mode) можно менять длину линейки, перетаскивая ее за любую часть края.
Точное управление: для максимально точной настройки (с точностью до пикселя) можно комбинировать перетаскивание мышью с использованием клавиш-стрелок на клавиатуре. Синхронизация в реальном времени: любые изменения, внесенные в меню (выбор материала/цвета, настройка отступов и т. д.), применяются мгновенно.
Все параметры калибровки (PPI, выбранные единицы измерения, отступы) сохраняются исключительно локально в вашем браузере; данные никуда не передаются.
Нажмите на значок расширения и перейдите в «Режим калибровки».
Выберите эталон (например, банковскую карту) и подгоните размер так, чтобы красная рамка совпала с реальным объектом.
Нажмите «Добавить линейку» или «Добавить транспортир» на любой странице, чтобы начать измерения.
Нажимайте на значки на панели инструментов, чтобы быстро менять материал или цвет, а также регулировать прозрачность.
Перетаскивайте основной элемент для перемещения, а маркер вращения на конце — для изменения угла наклона.
Нажмите на значок в виде кусочка пазла 🧩 в правом верхнем углу браузера, найдите «Online Ruler» и нажмите на значок булавки рядом с ним, чтобы закрепить расширение на панели инструментов. После этого вы сможете в любой момент открыть линейку, просто нажав на этот значок.
Да. Поскольку разрешение экранов на разных компьютерах отличается, простое отображение изображения линейки не обеспечило бы точности. Однако это расширение использует технологию «физической калибровки»: достаточно один раз сопоставить линейку на экране с банковской картой или листом бумаги формата А4, чтобы система запомнила реальные размеры вашего экрана и позволила выполнять точные измерения в масштабе 1:1.
Да. Система поддерживает различные эталонные объекты; для выравнивания и калибровки можно использовать лист бумаги формата А4 или монету. В будущем мы планируем добавить другие эталоны, например, бумагу формата А5 или стандартные размеры экранов смартфонов.
Режим «Независимое окно» открывает отдельное чистое окно с линейкой, которое можно перемещать в любую часть экрана — даже поверх других приложений. Режим «Внедрение на страницу», напротив, «привязывает» линейку непосредственно к текущей веб-странице; он поддерживает настройку прозрачности, поэтому линейка не будет перекрывать контент, который вы читаете.
Да! Версия 2.0.0 поддерживает одновременное использование нескольких линеек и транспортиров. Вы можете несколько раз нажать кнопки «Добавить линейку на текущую страницу» или «Добавить транспортир»; каждый инструмент можно независимо перемещать, поворачивать, масштабировать и настраивать (выбирая различные материалы или цвета), что делает их идеальными для сравнительных измерений и геометрического позиционирования.
Опции выбора материала находятся на панели инструментов в конце линейки или во всплывающем меню расширения. В настоящее время поддерживаются такие материалы, как дерево, пластик и металл. При выборе пластика можно также переключаться между различными цветовыми схемами, чтобы подобрать цвет под фон веб-страницы.
Можно воспользоваться функцией «Смещение нулевой отметки» (Ruler Zero-Point Offset). Она имитирует защитный наконечник, имеющийся на обычных линейках, и позволяет задать начальный отступ (в миллиметрах), а также быстро вернуться к исходному состоянию с помощью функции сброса в один клик.
Это очень просто. В режиме работы на веб-странице не нужно целиться в крошечный уголок: достаточно потянуть за любую часть края линейки, чтобы свободно изменить ее длину.
Да! Просто перетащите маркер поворота на конце линейки. Также поддерживается точная фиксация угла (привязка) при повороте на 45°, 90° и 180° для быстрой настройки.
Да! В версии 2.0.0 мы добавили полнофункциональный транспортир. Вы можете разместить на странице транспортир с точным масштабом 1:1, нажав кнопку «Добавить транспортир». Он поддерживает вращение на 360°, различные цветовые схемы и синхронизацию PPI на основе физической калибровки.
Полнофункциональный транспортир поддерживает калибровку по PPI для точного определения размеров, свободное вращение на 360° и различные полупрозрачные цветовые схемы (например, «Классический синий» и «Техно-зеленый»), обеспечивающие хорошую видимость на фоне веб-страниц любого типа.
Динамический транспортир по трем точкам измеряет углы, используя одну вершину и две конечные точки. В отличие от стандартного транспортира, здесь не нужно совмещать деления шкалы: достаточно просто переместить три контрольные точки так, чтобы они совпали с элементами веб-страницы. Он идеально подходит для измерения нестандартных углов, краев элементов дизайна или геометрических углов на изображениях.
Да. Вы можете перемещать две конечные точки, и измерительные лучи будут удлиняться без ограничений. Это делает инструмент идеальным для измерения крупных элементов веб-страниц, длинных диагональных линий или сложных геометрических фигур.
Да. Транспортир по трем точкам позволяет независимо регулировать прозрачность центрального сектора. Это дает возможность четко видеть измеряемый диапазон, не перекрывая при этом текст или детали веб-страницы, находящиеся под сектором.
Нет. Данные калибровки (например, PPI), выбранные единицы измерения и параметры смещения синхронизируются и сохраняются в режиме реального времени. Настройки применяются мгновенно — как при внесении изменений во всплывающем меню, так и при переходе между страницами.
Да. Расширение поддерживает как метрическую (см, мм), так и имперскую (дюймы) системы измерения, обеспечивая высокую точность в имперских единицах — вплоть до 1/16 дюйма.
Нет. Все данные калибровки и настройки сохраняются локально в вашем браузере; никакие данные не передаются на сервер, поэтому вы можете пользоваться инструментом, не опасаясь за конфиденциальность.
Все материалы (дерево, пластик, металл) отрисовываются с использованием технологии SVG для создания реалистичных динамических эффектов. Они выглядят привлекательно и четко, но при этом «легкие» и не замедляют загрузку или работу веб-страницы.
🎉 Обновление v2.2.0: управление с клавиатуры и высокоточная настройка веб-линеек
Это обновление делает работу с веб-линейками более точной и удобной. Мы добавили полноценное управление с клавиатуры, позволяющее выполнять выравнивание с точностью до пикселя и быстро переключаться между несколькими линейками:
✨ Точная настройка с помощью клавиш: выберите линейку, а затем используйте клавиши со стрелками (↑ / ↓ / ← / →), чтобы перемещать её на 1 пиксель. Удерживая клавишу Shift, вы сможете перемещать линейку с шагом в 10 пикселей — это удобно как для ювелирно точных измерений, так и для быстрого позиционирования.
✨ Быстрый выбор линейки: просто кликните по любой линейке на веб-странице, чтобы сделать её активной. На экране появятся понятные подсказки, благодаря которым вы сразу поймете, как управлять линейкой с помощью клавиатуры.
✨ Удобное переключение клавишей Tab: если на странице размещено несколько линеек, вы можете легко переключаться между ними, нажимая клавишу Tab (или сочетание Shift + Tab). Это значительно упрощает сравнение измерений, выполненных с помощью разных линеек.
✨ Интуитивно понятные подсказки: встроенные указания (например, «Стрелки — перемещение на 1 пиксель», «Shift + стрелки — перемещение на 10 пикселей») и полезные всплывающие подсказки помогут вам сразу приступить к работе — запоминать сложные комбинации клавиш не потребуется.
🎉 ОБНОВЛЕНИЕ v2.1.0: ДОБАВЛЕН ДИНАМИЧЕСКИЙ ТРЕХТОЧЕЧНЫЙ ТРАНСПОРТИР!
Это обновление расширяет возможности измерения углов прямо на странице благодаря новому динамическому трехточечному транспортиру:
✨ Динамический трехточечный транспортир: инструмент, состоящий из вершины и двух конечных точек, позволяет быстро измерить любой угол.
✨ Расчет угла в реальном времени: автоматическое вычисление и отображение угла между двумя лучами в градусах (°) при перемещении конечных точек.
✨ Динамическое изменение длины лучей: возможность плавно изменять длину измерительных лучей для работы с крупными элементами или линиями дизайна.
✨ Полупрозрачный сектор: визуальное отображение измеряемого угла с помощью полупрозрачного сектора (степень прозрачности можно регулировать).
✨ Независимая привязка лучей: каждый луч привязывается к шагу в 45° (0°, 45°, 90° и т. д.) для быстрого выравнивания по стандартным направлениям.
✨ Точное выравнивание: поддержка различных цветов и наличие прозрачного полого круга в вершине для обеспечения максимальной точности.
🎉 КРУПНОЕ ОБНОВЛЕНИЕ v2.0.0: УНИВЕРСАЛЬНЫЙ ГЕОМЕТРИЧЕСКИЙ ТРАНСПОРТИР УЖЕ ДОСТУПЕН!
Это обновление превращает инструмент из простого средства измерения в полноценный набор геометрических инструментов:
✨ Новая функция — транспортир: теперь на любую веб-страницу можно добавить не только линейку, но и транспортир.
✨ Свободное вращение на 360°: возможность поворота на любой угол с помощью специального маркера для точного измерения наклонов и углов.
✨ Различные цветовые стили: выбор полупрозрачных цветовых схем (классический синий, технологичный зеленый, яркий оранжевый и др.) для отличной видимости.
✨ Синхронизированная физическая калибровка: отображение транспортира адаптируется под параметры PPI вашего экрана, обеспечивая точность измерений в реальных размерах.
ПОДДЕРЖКА НЕСКОЛЬКИХ ЛИНЕЕК И РАЗНООБРАЗНЫЕ МАТЕРИАЛЫ
Это обновление расширяет возможности многомерных измерений и предлагает новые варианты визуального оформления:
✨ Поддержка нескольких линеек: возможность размещать на одной странице сразу несколько линеек для выполнения сложных сравнительных измерений.
✨ Новые материалы — пластик и металл:
- Пластик: разнообразные свежие цвета, придающие интерфейсу более живой вид.
- Металл: реалистичная текстура шлифованного металла, создающая ощущение профессионального и высокотехнологичного инструмента.
✨ Настройка цвета материалов: для пластика теперь доступны различные цветовые схемы, позволяющие адаптировать внешний вид под разные фоны веб-страниц и личные предпочтения.
Произвольный поворот на 360°
Забудьте об ограничениях, связанных с фиксированным горизонтальным или вертикальным положением. Теперь вы можете поворачивать линейку под любым углом, чтобы совместить ее с любым объектом на экране:
✨ Плавный поворот: просто перетащите новый маркер поворота на конце линейки (в режиме наложения), чтобы изменить угол наклона, наслаждаясь плавностью движений и мгновенным откликом.
✨ Точная фиксация углов: легко фиксируйте линейку в ключевых положениях (например, 45°, 90° и 180°) благодаря встроенной системе привязки и предустановкам, позволяющим быстро переключаться между углами одним нажатием.
✨ Индикация угла: динамическая подсказка в реальном времени отображает точное значение угла поворота, гарантируя профессиональную точность измерений.
✨ Безупречный вид: реалистичная текстура дерева, деления шкалы и интерактивная панель инструментов сохраняют четкость и правильные пропорции при любом угле поворота.
Первоначальная версия.
Это расширение имеет открытый исходный код, размещенный на GitHub. Мы приветствуем вклад сообщества!
Перейдите на GitHub, чтобы посмотреть исходный код.Посмотрите другие инструменты для повышения продуктивности в Chrome, которые я разработал.
🚀