css - 为有角度的徽标创建无缝、可平铺的图像

Question

这不是一个直接的编程问题，但它确实使用了一些数学和 css 并且它已经困扰了我一段时间了。

我的目标是创建一个有角度的徽标图像（将徽标旋转 35 度）并使其可以平铺。我已经提到了这个经过深思熟虑的问题，但我目前有点卡在第 1 阶段。

所以说这是我的标志：

它不是那么规则，因为它在左上角有一个小图标，并且没有设置在设定大小的矩形内，因此它的边界不明显。

我想，第一步是让它以当前的形式平铺。仅仅对它应用一个 css 平铺规则就会导致这样的结果，这是不好的：

理想情况下，在我们旋转它之前，我们希望交替行偏移，这样它就不像网格了。

偏移量显然应该是 2 个相邻徽标上同一点之间空间的 50%。实现此步骤的最佳方法是什么？我只是复制/粘贴并拖动它直到它看起来正确吗？这不会那么准确。（使用 Photoshop）。

然后我需要确定裁剪区域，以便无缝重复。

一旦完成，我就有了一个图像网格，我现在可以在 Photoshop 中将其旋转到我想要的角度。困难在于使作物区域正确。然后我会参考我上面的链接。

增加的困难是确保我们有一个合适的水平标志裁剪区域。如果边缘的比率意味着我们有一个非常高的最小公倍数，那么我的旋转裁剪区域将是巨大的且毫无意义的。

总而言之，可靠地设置水平网格以便我们获得具有合理尺寸（例如 150 x 100 像素）的裁剪区域的最佳方法是什么？

Answer 1

好的，经过一些艰苦的尝试，我已经破解了它，但只是旋转了 45 度。如果有人可以就如何计算其他角度的裁剪区域提供建议，我会很感兴趣。

• 所以第一步是制作一个水平的标志网格，就像问题中的最后一个例子一样。为此，将徽标放在画布的左上角，然后裁剪画布，使徽标正好适合里面。

• 接下来，如有必要，将画布调整为大约我们想要的图像大小。在这个阶段，纵横比并不重要，我们只希望有一个可管理的图像尺寸来工作。像 250px 宽的东西很好。这样做的结果很可能是另一边的尺寸很奇怪。例如 250px 宽 x 78px 高。

• 现在我们用空白填充徽标。这将有两个目的。首先要在徽标之间留出足够的空间，其次要获得良好的纵横比。这真的很重要。如果可能的话，试着让你的画布的一个边缘是另一边缘长度的 1/2 或 1/3。这将帮助我们尽可能降低最小公倍数。调整画布大小时，请确保将实际徽标保留在画布的左上角，填充位于图像的右侧和底部。

• 我们现在要手动平铺图像，但还要包括填充区域。如果我们只是照原样复制它，photoshop 将忽略填充区域而只复制徽标本身。创建一个新图层并将其与徽标图层放在图层文件夹中。用颜色填充这个层。

• 现在制作一个新的 Photoshop 文档。使画布尺寸相当大；比如 1000 像素 x 1000 像素。

• 将刚刚创建的图层文件夹复制到这个新文档中，方法是在选中图层时选择图层->复制，然后选择新文档作为目标。

• 现在通过复制图层并拖动它来平铺这个文件夹。首先向下拖动第一个副本，然后向右拖动。Photoshop 通过将关键点的图层与原始图层对齐来帮助解决此问题。您会发现，当复制图层的顶部边缘接触原始图层的底部边缘时，您可以捕捉复制图层，并且沿着长度的一半使其水平偏移。

• 继续复制和对齐，直到你用瓷砖大部分覆盖了大画布。

• 现在制作将产生平铺图像的裁剪。获取选择工具并选择fixed size选项。输入一个像素大小，使选择成为一个正方形，其边缘的长度与原始图像的较长长度相同。即，如果您的原始图像是 150 像素 x 50 像素，那么您应该使您的裁剪尺寸为 150 像素 x 150 像素。

• 单击画布上的任意位置进行选择，复制合并到一个新文档，您应该会发现您将拥有可以使用的可平铺图像，尽管带有水平徽标。

• 现在旋转它。转到大型平铺文档。Ctrl-D 取消选择。编辑-> 将画布旋转 45 度。

• 现在计算作物的大小。如下：

  1. 求最小公倍数。因此，如果您的尺寸是 150x50 LCM = 150。

  2. 裁剪框的大小是直角三角形的斜角，其他边长 = LCM。即如果LCM = 150，L = sqrt(150 ² * 150 ² ) = 212.12。

• 现在制作一个大小为 212 的方形裁剪（在这种情况下）旋转的画布（任何地方都可以）。这应该是一个可以保存、调整大小、编辑等的可平铺图像。

这种方法在我公司的 Twitter 页面上很有效

正如我所说，任何计算其他角度的裁剪大小的方法都会有所帮助。