JavaScript平铺实验

2020年12月30日11:12:36 发表评论 55 次浏览

本文概述

对于某些网站, 用户参与度受娱乐价值(网站的转移程度)的驱动。在建立这样的网站时, 创建独特的视觉标识至关重要。你的代码应旨在在满足客户设计要求的同时, 在审美层面上丰富用户的娱乐体验。

一种方法是使用由单个图像组成的设计覆盖表面。这样做时, 覆盖图像没有任何间隙或重叠, 这称为平铺平面-平面是表面, 而平铺是覆盖平面的图像集合。

多年来, 我对此主题的兴趣一直在激起。几周前, 我遇到了一篇题为"计算机生成的伊斯兰星型。"作者Craig Kaplan就该主题进行了广泛的写作, 在本文中, 我将参考他的出版物以获取启发和示例。

原始资料

碰巧的是, 卡普兰先生还有一个GitHub个人资料还有一个用于平铺飞机的图书馆触觉JS。基本上, 这是一个专用于平铺的实用程序库。

根据 "计算机图形学入门拼贴理论"中有93种"平铺类型", 即图块之间可以相互关联的不同方式。其中12个很无聊, 因为它们不可自定义;该库使你可以操纵其他81种类型。

对于这81种类型, 图块的一个边缘发生变化也会导致其他边缘发生变化-当然, 这是使它们在数学上引起关注的原因, 但这也是为什么我们需要一个专用的库来确定其他边缘的变化方式的原因应该改变。

在本教程中, 我们将逐步介绍如何使用TactileJS为你的网站创建外观精美的图案。你需要将其连接到图形库, 以实际显示你定义的图块。 Tactile提供了有关如何使用JavaScript处理端口进行此操作的演示。

演示版

Kaplan已经展示了一些Tactile用例。我在这里将其复制为CodePen示例。它们非常详尽, 乍一看似乎令人生畏, 但是理解这些示例将帮助你更轻松地围绕通用概念。

以下交互式演示使你可以通过处理发送到Tactile中的参数来动态更改拼贴。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

JavaScript平铺实验1

交互式演示的此变体显示了对触摸事件的支持。

这两个都使用称为tileinfo.js, 这使得使用Tactile的工作少一些毛。我还将在一些演示中使用它。

要弄清楚如何使用正在使用的任何图形库进行平铺, 可能需要花费大量代码, 因此Kaplan还创建了一个最小的示例。

创造者泰勒

尽管这些演示对于教瓷砖的工作原理很有用, 但我认为它们仍然比需要的复杂一些, 尤其是如果你只想生成一些快速的图块并绘制它们时。

因此, 我建立了一个小实用程序库来提供此功能, 因此我可以自由调用TilerTheCreator-因为当宇宙给我一个绝佳的机会来使用这样的名字时, 我怎么会拒绝呢?

在本例中, 我将使用粗糙JS绘制图块, 然后从我能想到的最简单的演示开始。

RoughJS需要使用canvas元素, 而其他大多数图形库都需要使用DOM元素, 但是会根据需要创建canvas或svg元素。

简单平铺

我们开始的HTML很简单;我们需要的只是一块画布。

<canvas id="roughcanvas" class="roughcanvas">
        </canvas>

demo_rough.js看起来像这样:

import { TilerTheCreator } from './Tiler_The_Creator.js';

const setCanvas = () => { 
        const roughCanvas =  rough.canvas( document.getElementById('roughcanvas') );
        const roughJSTiling = new TilerTheCreator({width: window.innerWidth, height: 10, type: 77}); 
        roughJSTiling.readyToTile(); 
        const polygons = roughJSTiling.getPolygonsFromRegion(); 

        polygons.forEach((polygon) => { 
            roughCanvas.polygon( polygon);
                        })
             } 
            setCanvas();

的类型:77瓷砖是一个三角形。更改高度和宽度将更改你拥有的瓷砖数量。

无论如何, 你的第一个拼贴将如下所示:

简单平铺示例

工程图的粗糙度是由于Rought.js的默认设置引起的, 与平铺本身无关。

这是我们可以制作的最简单的切片API。 readyToTile还做了其他一些事情, 通过使用相同的方法来实例化你的图块tiling.fillRegionBounds前面引用的最小示例中使用的函数。

更改多边形的大小

如果你想绘制不同尺寸的瓷砖, 可以传入比例因子实例化属性或使用setScaleTilerTheCreator公开的功能。

尝试传递财产scale_factor:50实例化拼贴时。

const roughJSTiling = new TilerTheCreator({width: window.innerWidth, height: window.innerHeight, scale_factor: 50, type: 77});

你应该看到类似以下结果:

调整多边形大小

更高级的平铺

显然, 我们可以使用库来绘制其他内容, 而不仅仅是图块-在本例中为RoughJS。但是, 由于有了与图块相关联的多边形信息, 我们可以看到绘制的其他事物与这些多边形之间的关系。

假设我们要在图块中画一个圆。

画一个圆的RoughJS代码是oughCanvas.circle(圆心X, 圆心Y, 圆直径)。这与SVG定义圆的方式匹配。

为了弄清楚我们的X和Y应该在哪里, 我们可以添加以下函数, 例如:

const getX = (polygon) => {
return polygon.map(p => p[0]);
}
const getY = (polygon) => {
return polygon.map(p => p[1]);
}

然后, 将它们添加到所有多边形的循环中。

const polygonX = getX(polygon);
    const polygonY = getY(polygon);
    const xmin = Math.min( ...polygonX );
    const xmax = Math.max( ...polygonX );
    const ymin = Math.min( ...polygonY );
    const ymax = Math.max( ...polygonY );
    const dx = (xmin+xmax) / 2;
    const dy = (ymin+ymax) / 2;
    roughCanvas.circle(dx, dy, 30, {fill: 'blue'});

这将产生以下图像。

高级平铺示例

我们还可以使用多边形中的信息来使用我们的图形库的方法对它们进行样式设置。我们不会对此做过深入的介绍, 但是让我们稍微改变一下我们首先实例化画布的方式。

const canvas = document.getElementById('roughcanvas');
const canvasW = canvas.width;
const canvasH = canvas.height;
const roughCanvas = rough.canvas(canvas);

绘制圆后, 我们可以添加以下内容。

const canvasDivisions = canvasW / 3;
const canvasMiddle = canvasDivisions + canvasDivisions;
const pointPlacement = (dx < canvasDivisions) ? "start" : (dx < canvasMiddle) ? "middle" : "end";
const styling = {};
styling.fill = (pointPlacement === "middle") ? "#8aea92" : "#80ada0";
styling.hachureAngle = (pointPlacement === "middle") ? 180 : 90;
styling.hachureGap = (pointPlacement === "middle") ? 10 : 5;

这样, 我们知道画布中的一些基本位置。绘制多边形时, 可以使用我们制作的样式属性。

roughCanvas.polygon(
polygon, styling
);

我们应该有这样的东西:

多边形样式属性

结合绘图API

另一个好处是, 我们可以在重新使用多边形数据的同时混合和匹配绘图工具。例如, 由于我们当前正在画布上绘画, 因此我们可以访问浏览器的本地画布API, 而不必依赖于库。

让我们使用canvas API的圆圈在圆圈中心绘制一个红色的星星drawImage功能。

首先, 通过canvas变量为绘图上下文添加一些代码。

const ctx = canvas.getContext('2d');

接下来, 加载图像, 并将所有先前的多边形操作放入图像加载事件中。这样, 我们就可以在需要时绘制图像。

const image = new Image();
image.src = 'path to redstar.png';
image.addEventListener('load', () => {
        //all our normal polygon manipulating code comes in here
    });

现在我们可以输入以下内容。

ctx.drawImage(image, dx - 12.5, dy - 12.5, 25, 25);

我们必须更改从其开始绘制的x和y坐标, 因为像SVG圆一样, RoughJS圆也是从x和y绘制的。

我们的模式应如下所示:

使用多个绘图API进行平铺

合并多个拼贴

最后, 由于我们的切片解决方案与图形库是分开的, 因此没有什么可以阻止我们在同一图形中使用多个切片。

让我们删除多余的绘图代码, 但使用与之前添加的样式规则相同的样式。我们将创建两个新的TilerTheCreator实例, 并使用它们来获取一些多边形。

一旦有了这些多边形, 我们就可以做两件事:分别绘制两个多边形数组, 从而对绘制各自的平铺图具有不同的规则, 或者简单地将它们拼接成一个数组并使用相同的规则绘制它们。

让我们参考前面的样式演示。

我们将对其进行新的变化, 但以相同的方式绘制了两个不同的拼贴。

它看起来应该是这样的:

平铺多个多边形阵列

我们的样式仍然在那里, 所有多边形都在同一阵列中。

const polygons = roughJSTiling.getPolygonsFromRegion().concat(roughJSTiling2.getPolygonsFromRegion());

因此它们是由相同的多边形绘制功能绘制的。

你也可以像这样绘制两个数组:

平铺多个多边形阵列

这里的主要区别是绘制了我们的第二个多边形数组。

polygons2.forEach((polygon) => {
            roughCanvas.polygon(
                  polygon, {fill: 'red'}
            );
        });

如果将它们保留在两个单独的拼贴中, 则我们还可以绘制某种特定类型的拼贴, 例如仅绘制每三个拼贴或将图块放置在画布上的某个位置。

查看以下示例以获取灵感。

按索引样式平铺:

如果它们位于画布中间, 则不要以一个阵列绘制图块:

由于图形是用JavaScript绘制的, 因此我们可以像处理其他任何事情一样对页面上的事件做出反应。例如, 我们可以响应事件更改平铺或更改其他内容。

总结

当然, 使用这些技术还可以做很多其他事情, 例如组合多个平铺和绘画方法以制作万花筒效果或平铺动画。希望本指南为你提供一些想法, 以帮助你开始JavaScript铺砌旅程。

日志火箭:通过了解上下文更容易调试JavaScript错误

调试代码始终是一项繁琐的任务。但是, 你越了解错误, 就越容易修复它们。

日志火箭使你能够以新颖独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与你的JavaScript前端的互动, 从而使你能够准确找出导致错误的用户行为。

LogRocket仪表板免费试用横幅

notlogy记录控制台日志, 页面加载时间, 堆栈跟踪, 缓慢的网络请求/响应(带有标题+正文), 浏览器元数据和自定义日志。了解你的JavaScript代码的影响再简单不过了!

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: