Онлайн-генератор треугольников css вручную

JavaScript CSS
Онлайн-генератор треугольников css вручную

УлучшитьФронтенд разработкаЭффективность, автор написал сотни интерфейсных инструментов, некоторые из которых используются внутри компании, а некоторые просто потому, что они слишком "ленивый", не хочу писать код, вот почему"принужденный"Делайте. Инструмент, представленный рядом -css генератор треугольниковЭто также потому, что раньше я хотел высвободить продуктивность дизайнеров, но мне было лень вырезать картинки или писать.cssкод, так что подумайте об этом или сделайте его самиМожет автоматически генерировать код треугольника cssинструмент.

Далее автор познакомит вас с использованием и реализацией этого инструмента, чтобы вы могли расширить его еще больше»ленивый инструмент".

Предварительный просмотр онлайн-генератора треугольников css

Из анимации предварительного просмотра видно, что мы можем легко настроить различные желаемые треугольники с помощью онлайн-инструмента и можем просматривать их в режиме реального времени.cssкод. После разработки этого инструмента автору больше не нужно беспокоиться о необходимости писать код треугольником от руки (также можно найти рыбу на работе. Действительно, много раз я просто не хочу писать код и хочу иметь деньги). В конце статьи автор прикрепитcssОнлайн-адрес инструмента, давайте посмотрим на конкретный процесс внедрения.

Реализовать генератор треугольников css

Поскольку спрос на этот инструмент исходит от внешнего интерфейса, он должен быть правильным.cssиjsУ программирования есть определенная основа, например css3transform, transition, макет, блочная модель,borderграничные характеристики и др.

Как и любой инструмент с открытым исходным кодом, написанный автором ранее, вы должны уточнить требования и цели перед разработкой проекта.Здесь автор кратко систематизирует требования:

  • Генерация треугольников любого размера (размера)
  • Генерация треугольников в разных позициях (направлении)
  • Создание треугольников с разными углами (поворот)
  • Генерировать треугольники с разным цветом фона (цвет, по сути, не имеет значения, если это не реализовано, в основном потому, что автору лень писать этот код)

Поняв требования, мы можем примерно нарисовать простую диаграмму прототипа, чтобы представить нашуcssИнтерфейс генератора выглядит следующим образом:

С диаграммой прототипа мы можем получить диаграмму разбивки задач следующим образом:

Суть, которую автор хочет упомянуть здесь, заключается в том, что описанный выше процесс на самом деле применим к любому проекту, включая сложные проблемы, с которыми вы сталкиваетесь, вы можете шаг за шагом прояснить идею, разбить большую цель на маленькие цели, а затем одну за другой. 1. Разбейте его, и большая проблема будет решена.

Далее мы сначала проанализируем использованиеcssРеализовать принцип треугольника.

1. Принцип рисования треугольников css

Фактически, автор также поделился более чем 3 видами использования в предыдущих статьях.cssДля реализации схемы треугольника здесь автор вводит общий метод, заключающийся в использованииborderЧтобы понять треугольник, давайте сначала посмотрим на следующую схему:Вышеприведенное показывает, когда элемент boxwidthменьше, чем он самborderкак это выглядит, когда ширина равна нулю и когда ширина блока равна нулюborder-widthЭто похоже на то, когда он не равен нулю.Проанализировав график, легко ли подумать, что если мне нужен цвет только с одной стороны, а остальные прозрачны, могу ли я стать треугольником?

Это действительно достигается.Познав этот принцип, мы продолжим осознавать «треугольник» того, что вы видите, это то, что вы получаете.

2. Реализация редактора

Реализация редактора также является долговременной темой для фронтенд-разговоров, автор находится вH5-DooringВ проекте написан очень сложный редактор, а здесь нам нужен только статический и простой редактор, интерфейс как показано ниже:Мы можем реализовать его с любой структурой и библиотекой компонентов, в которых мы хороши, например,vue3+ element plus, react + antd4.0, здесь автор принимаетreactСхема реализована, а селектор цвета заимствован у известного сообщества.react-color.

Автор не будет вводить код интерфейса редактора один за другим, я думаю, что каждый сможет его реализовать, а логику обмена данными со стилем поговорим здесь:

Если мы хотим, чтобы область предварительного просмотра и область предварительного просмотра кода CSS могли изменяться в режиме реального времени при изменении значения формы, мы должны поделиться данными формы здесь, мы можем использоватьreactкомпонентstateилиvueизvuex(Хотя данные можно продвигать и без vuex), чтобы делиться состоянием.

3. Реализация области предварительного просмотра

Реализации области предварительного просмотра на самом деле очень легко добиться с помощью приведенного выше анализа, просто используйте общийformДанные могут быть привязаны к стилю элемента треугольника.Здесь автор также использует северный фон холста.cssреализовано, как показано ниже:

Если вы заинтересованы, вы можете cv его Код выглядит следующим образом:

.previewArea {
  display: inline-block;
  width: 360px;
  height: 360px;
  background: #eee;
  background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
                  linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;
}

Еще один ключевой момент — как переключить направление треугольника.Все мы знаем, что после переключения направленияcssизborderНекоторые свойства направления , изменятся, например, когда направление треугольника направлено вверх, нашаcssследующее:

{
  border-width: 0 60px 60px 100px;
  border-color: transparent transparent #06c transparent;
}

Когда направление треугольника вниз, нашcssследующее:

{
  border-width: 100px 60px 0 60px;
  border-color: #06c transparent transparent transparent;
}

Левый и правый также похожи, поэтому нам нужно поддерживать 4 стиля.Если мы хотим добавить верхний левый, верхний правый, нижний левый и нижний правый позже, код будет очень сложно поддерживать (неif elseэтоswitch, если быть честнымswitchОн подходит только для суждений при 8 условиях), поэтому для его решения автор использует объектный метод и инкапсулирует его в функцию:

const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
    const borderWidthAndColor:any = {
      '1': {
        borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
        borderColor:`transparent transparent ${color} transparent`
      },
      '2': {
        borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
        borderColor:`${color} transparent transparent transparent`
      },
      '3': {
        borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
        borderColor:`transparent ${color} transparent transparent`
      },
      '4': {
        borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
        borderColor:`transparent transparent transparent ${color}`
      }
    }
    return borderWidthAndColor[direction]
  }

На самом деле, предварительный просмотр свойств, таких как ширина, высота и цвет фона, прост в обращении. Автор не будет вводить их здесь по одному. Предварительный просмотр выглядит следующим образом:

4. Реализация отображения кода в реальном времени

Что касается отображения кода в текстовом поле в реальном времени, то это тоже очень легко реализовать.Нам нужно только отображать полученные данные в текстовом поле в реальном времени.Поскольку автор принимает модуль css и метод реакции, необходимо выполнить дополнительные css. Для обработки, такой как преобразование формата объекта в формат спецификации CSS, необходимо добавить следующие шаги:

JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')

Таким образом, генератор треугольников css готов, и вы можете продолжать расширяться на этой основе, например, поддерживать многоугольники, шестиугольники, ⭐пятиугольники и т. д., и это совершенно не проблема.

Адрес онлайн-опыта:онлайн генератор треугольников css

Недавний редактор H5H5-DooringТакже было сделано много обновлений и оптимизаций, и те, кто заинтересован, также могут учиться и исследовать.

найти его полезным? Добавьте в избранное, если вам это нравится, и, кстати, поставьте лайк Ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных на холсте и другие интерфейсные знания и реальный бой.

Категории