如何使用wordpress的paper.js从人群中脱颖而出

你想绘制,油漆和动画你的WordPress页面创建一个独特的东西,合法地酷吗?例如,你没有秘密地秘密地想要水母游泳吗?

谁没有!

嗯-今天是你的幸运日,因为我们将覆盖paper.js,这是一个辉煌的JavaScript库,它使网站像PataTap和Paperoids一样.

如果您之前使用过paper.js并且只想发现如何将paper.js与Wordpress 集成,请随时跳过介绍!

目录:

  • 什么是paper.js?
  • 我可以用paper.js做什么,谁是谁?
  • 如何在我的网站上安装paper.js?
  • 如何为wordpress设置paper.js?

paper.js?

paper.js 是一个JavaScript框架,允许您使用图形脚本进行强盗.它是一种自称为瑞士军刀的矢量图形脚本,由设计师和开发人员都喜欢.

  • paper.js是一个开源向量图形脚本框架,在HTML5 Canvas的顶部运行.它提供了一个干净的场景图/文档对象模型和许多强大的功能,可以创建和与向量图形和Bezier曲线一起创建和工作,全部在设计精心设计,一致和清洁的编程界面中整齐地包装.
  • paper.js是基于并主要兼容Scriptographer,一个用于Adobe Illustrator的脚本环境,具有积极的脚本运动员和超过10年的发展.
  • paper.js易于学习初学者,并且有很多掌握中级和高级用户.
  • 这是一种简单的方法,让您的网站更有趣,更有趣的方式让您的网站更容易眼睛.

让我们这样做:如果jquery是类固醇上的javascript,纸张.蘑菇是javascript -这就是所有创造力来自的东西.

基本概念:帆布和paperscript

画布是一个html5元素,字面上充当画布.我知道,对吧!它是图形的容器.您必须使用脚本实际绘制图形.默认情况下,元素既没有内容也没有边框.

如果您在纸张文件中仔细观察到下面的文件或下面的示例中,您将看到它而不是"文本/javascript"我们有"文本/paperscript".

加载GIST 94F9CF90F0AED55CE009CE6A418AB100

paperscript是一个专门用于paper.js的域特定语言,所以除非包含paper.js,否则它不会工作.

我可以用paper.js做什么,谁是谁?

在paper.js中,您可以轻松地以任何颜色和尺寸绘制路径和形状.您可以创建项目,对象,栅格,交互式工具和图层.您可以为项目设置动画,添加数学操作,甚至创建自己的游戏.简而言之,您可以在Paper.js中做的真的仅限于您的创造力和想象力.

paper.js的基本功能:

  • 文档对象模块
  • 创建路径和段
  • 动画
  • 鼠标和键盘交互
  • SVG导入和导出
  • 光栅图像和颜色平均
  • 矢量几何
  • 数学运作
  • 对象转换

请注意,在本教程中,我 no t旨在解释paper.js的每个属性和功能.我将专注于在WordPress中设置Paper.js.如果您想了解有关Caper.js的功能和特定功能的更多信息,您可以在其官方网站上找到伟大的教程.

还请记住纸张.js是一个JavaScript框架.你可以在技术上在vanilla javascript中做同样的事情,但它会带你的行和代码线.

熟悉JavaScript和矢量绘图应用程序,如Adobe Illustrator将找到非常直观的Paper.js,最有可能从中获利.您可以同样地在Paper.js中创建路径.当然,需要基本的JavaScript知识.

如何在我的网站上安装paper.js?

如果您有节点或Bower,可以使用 NPM安装纸张 Bower安装纸张命令.否则,要在您的网站上包含paper.js,您必须首先从http://paperjs.org/download/从官方网站下载.

解压缩项目文件夹中的下载文件(即在资产中).

在HTML文件的头部内添加以下脚本:

加载GIST 99D1B558CDD489970FA907338F7D88CD

别忘了在你的身体中添加画布元素-你在paperscript中所做的一切都将在画布上可见.

您无需在HTML的头部写脚本-您也可以创建一个单独的Paperscript文件并将其添加到类似的HTML:

加载主旨crogroo/5d790bc192817b42f0b64495c8cf7de6

如何将paper.js添加到WordPress?

为了完成本教程并将Paper.js的令人敬畏功能添加到WordPress站点,您必须可以访问CPANEL和文件管理器.好的?酷,让我们走吧!

步骤1:创建子主题

您可以手动创建您的子主题.我很懒,所以我正在使用一个孩子主题生成插件(你可以在创建孩子主题后删除插件).在本教程中,我将使用Astra主题作为我的孩子主题的父母.

步骤2:下载最新版本的paper.js

下载最新版本http://paperjs.org/download/
解压缩下载的文件并打开"dist"文件夹.在那里,您将找到纸质核心和纸张完整的JavaScript文件.我将使用纸full-min.js ,因为它比 Paper-full.js .

步骤3:通过文件管理器

将paper-full.min.js文件上传到子主题文件夹中

这非常简单,我希望.我的孩子主题的位置是/WP-Content/Themes/Astra-Child/

步骤4:将paper-full.min.js脚本串入您的页面

让我们将JavaScript添加到我们的WordPress网站上,正确的方式,带有eNqueing.

我们还在文件管理器中.转到您的子主题并打开函数.php 文件.您鼓励在更改之前备份函数.php .将以下代码复制到函数中.

加载GIST 50B3749538A9781A9469A1297C9914C1

此脚本将浏览纸张.js库."enqueue_paper"只是我给出此功能的名称.它可以是任何东西,但你必须以相同的准确名称(句柄)稍后再电.

请注意,此代码将在整个WordPress网站中浏览 Paper-Full.Min.js 脚本.检查控制台-如果它没有显示错误,它会正确排序.您甚至可以在 paper-full.min.js 文件中添加Console.log("已连接")或警报("已连接")以确保所有内容顺利运行.

我想向特定页面添加paper.js脚本,以便我必须将条件标记添加到我的功能.

如下:

加载GIST F5BB8FD05EFFED9E89C53D3E6950EAA3
在这种情况下, 148 是我页面的ID.你的可能会有所不同.看到您的帖子或页面ID的最快方式是在后端编辑时检查其URL.例如,我的页面有这个网址:

mydomain.com/wp-admin/post.php?post= 148 &forth =编辑

post =后的数字是页面的ID.

eNqueuing背后的理论

如果您没有查看此帖子,这就是延时的作品.您必须使用WP_ENQueue_script,而不是在HTML文件的标题或页脚中添加脚本.这是为了确保各种脚本不会混淆并打破网站.

so,wp_enqueue_script函数寄存器和键入脚本.让我们解剖它:

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );

  • $句柄只是一个名字-一个唯一的标识符,您可以再次调用该函数.
  • $ source -将文件的URL源或相对于WordPress根目录插入脚本的路径.SRC需要在单引号内,如上面的示例中.($ src ='')
  • $依赖关系-插入先前注册脚本的句柄,在其上运行您的新脚本取决于.这通常是图书馆.
  • $版本-非常自我解释,对吗?默认值为false.
  • $ 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 并将其保存在保存纸Full.min.js的同一个位置.如果要确保正确输入文件,请添加console.log("已连接").

要添加依赖于划分的脚本,我们将简单地将句柄"纸张纤维结构"添加到数组.如果我们有更多的脚本要添加为依赖项,我们可以通过将它们添加到数组中以单行进行.

加载GIST 2F641F24390DAB710D23DCBA121F3A4E

现在应该正确连接,但我们仍有两个主要的事情要做.

步骤6:创建画布

我们需要创建一个纸张.将显示纸张.脚本的画布.默认情况下,这应该是如何看的:

加载GIST 5FAB547E386D301A9BAC2FD377860D2D

canvas是一个html5元素,无法添加WP文本编辑器.最简单的方法是您是使用页面构建器或支持编写自定义代码的插件.您将能够将Canvas元素放在页面上,在一行或div内(我用Divi和Siteorigin页面构建器测试).

您可以在CSS中拟合CSVAS,如您将拟合任何其他HTML元素.我将以下代码添加到我的子主题的style.css文件中以使其脱颖而出:

加载GIST B5EF5A731507D8A119DECC4391FAF7F2

注意:您可以在页面上有多个画布.只是不要忘记给他们不同的ID.

步骤7:直接使用JavaScript

使用paper.js

如果将任何Paperscript演示代码复制到Paper-example.js中,您可能会受到"未定义"错误的挫败感.我在这里告诉你,不幸的是,他们是预期的.

问题是WordPress不支持Paperscript,这意味着我们必须围绕这一点.我们需要直接使用javascript使用paper.js,如paper.js文档所示:http://perjs.org/tutorials/getting-started/using-javascript-directly/.

要这样做,所以您需要创建一个全局范围并定义其中的变量.

创建全局范围

我们可以通过将纸张范围全局注入到下面的代码中所示的窗口中.这会通过纸张对象访问所有纸张.js类和对象.我们还必须使用 paper.setup(画布)函数来定义纸张范围,它将自动为我们创建类.

加载GIST ECE21881B8C755418AF3250AE9BDD19C

请注意,在在JavaScript工作时,需要在适当的对象上手动安装诸如 onframe onresize 等处理程序.使用正确设置的纸张范围,我们要做的就是在现有视图对象上安装这些处理​​程序(示例= View.onframe ).

为了本教程,我已经创建了一个具有2个路径和一个工具的简单脚本,因此您可以看到如何将全局纸张范围和定义其中的变量定义.一整天旋转头部的黄色矩形是我的Path1变量,橙色线绘图工具绘制第二条路径.您可以将我的代码复制到您的 Paper-example.js 文件(或您打电话给您的文件)并开始工作.

Image from Gyazo

加载GIST 58428697F2E6B0B46E49F54C745BB67F

确保您在纸张范围内单独定义您的路径,工具,项目和视图.在Paperscript中工作时,您不必这样做,但在直接在JavaScript中工作时是必需的.

与paper.js!

0
订阅评论
提醒
0 评论
内联反馈
查看所有评论