创建无缝旋转的背景图像 [英] Creating seamless rotated background image

问题描述

我要重复旋转的背景图片。试图使其无缝化正在破坏我的灵魂。

从简单的事情开始，考虑每个图像被布置成砖。创建无缝重复背景图片非常简单：

（红色区域是裁剪）。您可以在。

我想弄清楚如何正确裁剪图像，以便我们有一个无缝重复。

[更新]

这是一个非常简单的数学计算，

我试图按照@ oezi的计算，以使事情更容易创建尺寸：100px x 50px的图像。

因此： / p>

最小公倍数= 100

Hypotenuse = 100 ² + 100 ² = 20000

现在我假设这意味着我们不必创建一个20000像素×20000像素的图像。希望@oezi可以澄清他如何执行调整大小

如果这是 ² + b ² = c ² 等于c =（a ² + b ² ）的平方根

那么我们可以同意我们的作物应该是141px？

最后，这并不能解释我们从哪里获取作物？

[Update 2]

看起来这是如何创建调整大小。拍摄141像素×141像素的图片可获得正确的效果 - http://jsfiddle.net/EfuV2/

至于从哪里裁剪，实际上并不重要！

解决方案

是旋转角度正好为45度，您必须找出最小公倍数

• 在您的情况下，这是 15100 width 100和height 151）


• 最好将模式缩放为width 100和height 150，因此最小公倍数仅为 300 li>
  

取这个数字和一些数学（ pythagorean定理）。假设您的数字是两个短臂的长度，并计算斜边的长度 - 这是我们的

• 在您的情况下，这是 21355

$ b

请注意，只是直接从我的头打，因为我现在不能尝试它 - 但我确定是正确的。

编辑： / strong>一个快速（和凌乱）的测试让我这样：

• http://i.imgur.com/rZuu9.jpg


• http://jsfiddle.net/mPqfB/2/ （先点击图片链接，否则jsfiddle不显示图片）

不小心我的模式只有423的高度和旋转不完美（这里没有photoshop），但它是足够证明我的数学是正确的。

I want to repeat a background image that is rotated. Trying to make it seamless is destroying my soul.

Starting with something simple, consider each image is laid out like bricks. Creating a seamless repeating background image is pretty simple:

(the red area is the crop). You can see this working as expected at http://jsfiddle.net/mPqfB.

Now let's say I want to rotate the image by 45 degrees:

Unfortunately, the same crop no longer works, as you can see on http://jsfiddle.net/mPqfB/1.

I'm trying to figure out how to crop the image correctly so that we have a seamless repeat. There's probably some fairly trivial maths involved to do this but I can't for the life of me figure it out.

[Update]

I'm attempting to follow @oezi's calculations so to make things easier have created an image of dimensions: 100px x 50px.

Therefore:

Least Common Multiple = 100
Hypotenuse = 100² + 100² = 20000

Now I'm assuming this means we don't have to create an image of 20000px x 20000px. Am hoping that @oezi can clarify how he performs his resizing??

If this is a² + b² = c² is equal to c = square root of (a² + b²)

Then we can concur that our crop should be 141px?

Finally, this doesn't actually explain where we take the crop from?

[Update 2]

It does look like this is how the resize should be created. Taking a 141px x 141px crop of the image yielded the correct results - http://jsfiddle.net/EfuV2/

As far as where to crop from, it doesn't actually matter!

解决方案

is the rotation is exactly 45 degrees, you'll have to find out the least common multiple of the width and height of your unrotated pattern.

• in your case, that's 15100 (width 100 and height 151)
• it would be much better to scale your pattern to width 100 and height 150, so the least common multiple is only 300

Take that number and some math (pythagorean theorem). Assume your number is the length of the two short arms and calculate the length of the hypotenuse - that's our result (make a square image of that size to get your pattern).

• in your case, that's 21355
• with resizing, it's ~ 424

Note that this is just typed straight from my head because i can't try it out practically at the moment - but i'm really sure it's correct.

edit: a fast (and messy) test got me to this:

• http://i.imgur.com/rZuu9.jpg
• http://jsfiddle.net/mPqfB/2/ (click the image-link first, otherwise jsfiddle doesn't show the image)

accidentally i made the pattern only be 423 in height and the rotation isn't perfect (don't have photoshop here), but it's good enough to prove that my math is correct.

这篇关于创建无缝旋转的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！