css - シームレスな回転背景画像の作成

Question

回転した背景画像を繰り返したい。シームレスにしようとすると、私の魂が破壊されます。

シンプルなものから始めて、各画像がレンガのように配置されていると考えてください。シームレスな繰り返し背景画像の作成は非常に簡単です。

ここに画像の説明を入力

（赤い部分が作物です）。http://jsfiddle.net/mPqfBで、これが期待どおりに機能していることを確認できます。

ここで、画像を 45 度回転させたいとします。

ここに画像の説明を入力

残念ながら、 http://jsfiddle.net/mPqfB/1でわかるように、同じクロップは機能しなくなりました。

画像を正しくトリミングして、シームレスに繰り返す方法を見つけようとしています。これを行うには、おそらくかなり些細な数学が必要ですが、私の人生ではそれを理解することはできません.

私は @oezi の計算に従おうとしているので、物事を簡単にするために、100px x 50px の寸法の画像を作成しました。

したがって：

最小公倍数 = 100
斜辺 = 100 ² + 100 ² = 20000

これは、20000px x 20000px の画像を作成する必要がないことを意味していると思います。@oezi がサイズ変更の実行方法を明確にしてくれることを願っています??

これが a ² + b ² = c ^{2の場合、 c = (a}² + b ² )の平方根に等しい

次に、クロップを 141px にすることに同意できますか?

最後に、これは実際に作物をどこから取得するかを説明していませんか?

これは、サイズ変更を作成する方法のように見えます。141px x 141px の画像を切り取ると、正しい結果が得られました - http://jsfiddle.net/EfuV2/

どこからトリミングするかは問題ではありません。

score 2 · Accepted Answer

回転が正確に 45 度である場合、回転していないパターンの幅と高さの最小公倍数を見つける必要があります。

その数といくつかの数学 (ピタゴラスの定理) を取ります。数字が 2 本の短い腕の長さであると仮定し、斜辺の長さを計算します。これが結果です (パターンを取得するには、そのサイズの正方形の画像を作成します)。

現時点では実際に試すことができないため、これは私の頭から直接入力しただけであることに注意してください-しかし、私はそれが正しいと確信しています。

編集：高速な（そして面倒な）テストで、これにたどり着きました：

誤ってパターンの高さを 423 にし、回転は完璧ではありません (ここにフォトショップはありません)。しかし、私の数学が正しいことを証明するには十分です。

score 0 · Accepted Answer

トリックは、切り取られるセクションがトリミング領域の反対側に残っているセクションと一致するポイントでパターンをトリミングすることです (青色のカットの例を参照)。それを正しく行うにはおそらく試行錯誤が必要ですが、十分に簡単にできるはずです。

繰り返しパターンの例

2 に答える 2