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

Как выделиться из толпы, используя Paper.js с WordPress

0
Want create site? Find Free WordPress Themes and plugins.

Если вы уже использовали Paper.js и хотите узнать, как интегрировать Paper.js с WordPress , не стесняйтесь пропустить вступление!

Что такое Paper.js?

Paper.js – это фреймворк javascript, который позволяет вам делать потрясающие вещи с помощью графических скриптов. Это самопровозглашенный швейцарский армейский нож сценариев векторной графики, любимый как дизайнерами, так и разработчиками.

  • Paper.js – это инфраструктура сценариев векторной графики с открытым исходным кодом, которая работает поверх HTML5 Canvas. Он предлагает чистую объектную модель графа сцены / документа и множество мощных функциональных возможностей для создания и работы с векторной графикой и кривыми Безье, которые аккуратно обернуты в хорошо разработанный, согласованный и чистый интерфейс программирования.
  • Paper.js основан и в значительной степени совместим со Scriptographer , средой сценариев для Adobe Illustrator с активным сообществом сценаристов и более 10 лет разработки.
  • Paper.js прост в освоении для новичков и имеет много знаний для средних и продвинутых пользователей.
  • Это простой способ сделать ваш сайт веселее и веселее, чтобы сделать ваш сайт проще для глаз.

Скажем так: если jQuery – это javascript для стероидов, Paper.js – это javascript для грибов – вот откуда все творчество.

Основные понятия: Canvas и Paperscript

Холст является элементом HTML5 , который буквально действует как холст. Я точно знаю! Это контейнер для графики. Вы должны использовать скрипт, чтобы фактически нарисовать графику на нем. По умолчанию элемент

Если вы посмотрите поближе на файлы Paper.js или на приведенный ниже пример, вы увидите, что вместо «text / javascript» у нас есть «text /aperscript».

Paperscript – это предметно-ориентированный язык, созданный специально для Paper.js, поэтому он не будет работать, если не включен Paper.js.

Что я могу сделать с Paper.js и для кого он?

В Paper.js вы можете легко рисовать контуры и формы в любом цвете и размере. Вы можете создавать элементы, объекты, растры, интерактивные инструменты и слои. Вы можете анимировать предметы, добавлять математические операции и даже создавать свои собственные игры. Короче говоря, то, что вы можете делать в Paper.js, ограничено только вашим творческим потенциалом и воображением.

Основные особенности Paper.js:

  • Модуль Объекта Документа
  • Создание путей и сегментов
  • Анимация
  • Взаимодействие мыши и клавиатуры
  • SVG импорт и экспорт
  • Растровые изображения и усреднение цвета
  • Векторная геометрия
  • Математические операции
  • Преобразование объекта

Обратите внимание, что в этом руководстве я не ставлю целью объяснить все свойства и особенности Paper.js. Я сосредоточусь на настройке Paper.js в WordPress. Если вы хотите узнать больше о функциональности и особенностях Paper.js,.

Также имейте в виду, что Paper.js – это фреймворк javascript. Технически вы можете делать все то же самое в vanilla javascript, но это займет у вас строки и строки кода.

Те, кто знаком с приложениями javascript и векторной графикой, такими как Adobe Illustrator, найдут Paper.js очень интуитивно понятным и, скорее всего, получат от этого наибольшую прибыль. Вы можете создавать пути в Paper.js так же, как вы рисуете их в Illustrator. Конечно, базовые знания JavaScript необходимы.

Как мне установить Paper.js на мой сайт?

Если у вас есть Node od Bower, вы можете использовать команды npm install paper или bower install paper . В противном случае, чтобы включить Paper.js на свой веб-сайт, сначала необходимо загрузить его с их официального сайта по адресу .

Распакуйте загруженный файл в папку вашего проекта (т.е. в ресурсы).

Добавьте следующие скрипты в заголовок вашего HTML-файла:

Не забудьте добавить элемент canvas в ваше тело – все, что вы сделали в paperScript, будет видно только на холсте.

Вам не нужно писать свой скрипт в заголовке вашего HTML – вы также можете создать отдельный файл papercript и добавить его в свой HTML.

Как мне добавить Paper.js в WordPress?

Чтобы завершить это руководство и добавить удивительные функциональные возможности Paper.js на свой сайт WordPress, у вас должен быть доступ к вашей cpanel и файловому менеджеру. ОК? Круто, поехали!

ШАГ 1: Создайте дочернюю тему

Вы можете создать свою дочернюю тему вручную. Я ленивая , поэтому я буду использовать плагин для детей тема генератора  (вы можете удалить плагин сразу после создания вашего ребенка темы). В этом уроке я буду использовать тему Astra в качестве родительской для моей дочерней темы.

ШАГ 2: Загрузите последнюю версию Paper.js

Загрузите последнюю версию.
Распакуйте загруженный файл и откройте папку «dist». Там вы найдете файлы javascript с бумажным ядром и с бумажными носителями. Я буду использовать paper-full-min.js,  потому что он немного легче, чем paper-full.js .

ШАГ 3: Загрузите файл paper-full.min.js в папку «Тема ребенка» через диспетчер файлов

Надеюсь, это довольно просто. Расположение моей дочерней темы: / wp-content / themes / astra-child /

ШАГ 4: Поставьте скрипт paper-full.min.js на свою страницу

Давайте  добавим javascript на наш сайт WordPress правильным способом с постановкой в ​​очередь.

Мы все еще в файловом менеджере. Перейдите к своей дочерней теме и откройте файл functions.php . Вам рекомендуется сделать резервную копию вашего functions.php, прежде чем изменять его. Скопируйте следующий код в functions.php.file.

Этот скрипт ставит в очередь библиотеку paper.js. «Enqueue_paper» – это просто имя, которое я дал этой функции. Это может быть что угодно, но вы должны позвонить позже с тем же точным именем (дескриптор).

Обратите внимание, что этот код ставит скрипт paper-full.min.js на весь ваш сайт WordPress. Проверьте консоль – если она не показывает ошибку, она ставится в очередь правильно. Вы даже можете добавить console.log («подключен») или оповещение («подключен») в файл paper-full.min.js,чтобы убедиться, что все работает гладко.

Я хотела добавить скрипт Paper.js на определенную страницу, поэтому мне пришлось добавить условные теги  в мою функцию.

Как это:

В данном случае 148 – это идентификатор моей страницы. Ваш, вероятно, будет другим. Самый быстрый способ узнать идентификатор вашего поста или страницы – это проверить его URL во время редактирования в бэкэнде.

Цифры после post = являются идентификатором вашей страницы.

Теория, стоящая за постановкой

Если вы не прочитали этот пост , вот как работает постановка в очередь. Вместо добавления вашего скрипта в верхний или нижний колонтитул вашего HTML-файла в WordPress вы должны использовать wp_enqueue_script . Это сделано для того, чтобы различные скрипты не смешивались и не ломали сайт.

Итак, функция wp_enqueue_script регистрирует и ставит в очередь скрипты. Давайте разберем это:

  • $ handle – это просто имя – уникальный идентификатор, с помощью которого вы можете снова вызвать функцию.
  • $ source – вставьте URL-адрес файла или путь к сценарию относительно вашего корневого каталога WordPress. Src должен быть внутри одинарных кавычек, как в примерах выше. ($ src = ”)
  • $ dependencies – вставьте дескриптор ранее зарегистрированного скрипта, от которого зависит запуск вашего нового скрипта. Обычно это библиотека.
  • $ version – довольно понятно, верно? Значение по умолчанию неверно.
  • $ in_footer – значение по умолчанию false – это означает, что вы помещаете скрипт в заголовок вашего HTML. Правда поставил бы это перед .

Мы не будем добавлять $ version и $ in_footer в качестве значения по умолчанию  false, которое  соответствует нашим потребностям. В нашем случае мы создадим файл paper-example.js, который зависит от библиотеки Paper.js.

Помните, что есть много популярных библиотек, таких как jQuery, которые уже включены в WordPress . Вам не нужно ставить их в очередь, только добавлять их как зависимости.

ШАГ 5: Поставьте в очередь ваш скрипт paper-example.js и добавьте paper-full.min.js в качестве зависимости

Сначала давайте создадим новый файл в вашем файловом менеджере. Назовите его paper-example.js и сохраните его там же, где вы сохранили paper-full.min.js. Добавьте console.log («подключен»), если вы хотите убедиться, что файл правильно поставлен в очередь.

Чтобы добавить зависимость к вашему сценарию в очереди, мы просто добавим дескриптор paperlibrary в массив. Если бы у нас было больше сценариев для добавления в качестве зависимостей, мы могли бы сделать это в одной строке, просто добавив их в массив.

Теперь все должно быть правильно подключено, но у нас еще есть две важные вещи.

ШАГ 6. Создание холста

Нам нужно создать холст, на котором будут отображаться скрипты paper.js. Вот как это должно выглядеть по умолчанию:

Canvas – это элемент HTML5, и его нельзя добавить в текстовом редакторе WP. Самый простой способ сделать это, если вы используете конструктор страниц или плагин, который поддерживает написание собственного кода. Вы сможете разместить элемент canvas на своей странице, внутри строки или div (я тестировал его с помощью конструкторов страниц Divi и SiteOrigin).

Вы можете стилизовать холст в CSS так же, как любой другой HTML-элемент. Я добавил следующий код в файл style.css моей дочерней темы, чтобы он немного выделялся:

Примечание. На вашей странице может быть несколько холстов. Только не забудьте дать им разные удостоверения личности.

ШАГ 7: Использование Paper.js напрямую с Javascript

Если вы скопируете какой-либо демонстрационный код papercript в paper-example.js, вы, вероятно, будете разочарованы «неопределенными» ошибками. Я здесь, чтобы сказать вам, они, к сожалению, ожидаемые.

Проблема в том, что WordPress не поддерживает papercript, а это значит, что нам придется обойти это. Нам нужно использовать paper.js напрямую с javascript, как показано в документации Paper.js.

Для этого вам нужно создать глобальную область видимости и определить в ней свои переменные.

Создание глобальной области

Мы можем сделать глобальную область видимости бумаги, вставив ее в окно, как показано в коде ниже. Это позволяет получить доступ ко всем классам и объектам Paper.js через объект paper. Мы также должны определить область действия бумаги, используя функцию paper.setup (canvas), которая автоматически создаст для нас классы.

Обратите внимание, что такие обработчики, как onFrame и onResize, необходимо вручную устанавливать на соответствующий объект при работе в JavaScript. При правильно настроенной области действия бумаги все, что нам нужно сделать, это установить эти обработчики на существующий объект представления (пример = view.onFrame ).

Для этого урока я создал простой скрипт с двумя путями и одним инструментом, чтобы вы, ребята, могли видеть, как разместить глобальную область бумаги и определить переменные внутри нее. Желтый прямоугольник, который весь день вращается вокруг своей оси, – это моя переменная path1, а инструмент для рисования оранжевой линии рисует второй путь. Вы можете скопировать мой код в файл paper-example.js (или как вы его называете) и начать работать оттуда.

Убедитесь, что вы определяете пути, инструменты, проекты и представления отдельно в пределах объема бумаги. При работе в papercript вам не нужно этого делать, но это необходимо при работе непосредственно в javascript.

Вот и все. Это все, что касается Paper.js. Если же вам нужны качественные и недорогие жалюзи, то найти их можно здесь рязань.жалюзи-светлов.рф . Торопитесь приобрести жалюзи по сниженным ценам со скидкой 19%. 

Did you find apk for android? You can find new Free Android Games and apps.

Теги:

Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0