ホームページ > ウェブフロントエンド > PS チュートリアル > 画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

高洛峰
リリース: 2017-03-21 17:15:52
オリジナル
3790 人が閲覧しました

多くの場合、画像の一部を調整する必要がありますが、この調整はスムーズかつインタラクティブである必要があります。 Photoshop の Liquiify フィルターにある Forward Warp ツールはそのようなツールであり、非常に便利です。同様のツールとして、 Meitu Xiu Xiu の小顔機能があります。この記事では、そのようなツールの背後にある原理とアルゴリズムについて説明します。

まず、Meitu Xiuxiu を例として、順変換関数について簡単に説明します。

まず、マウスを使用して円形の選択範囲を制御します。

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

次に、マウスの左ボタンをクリックして特定の方向にドラッグして、滑らかな前方変形画像を作成します:

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

このツールを使用すると、画像の一部をより自由度を持って調整できます。それはより実用的です。

このタイプのアルゴリズムの原理について話しましょう。

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

上の図では、影付きのリングは半径 rmax の円形の選択範囲を表しています。このうち、点 C はマウスをクリックしたときの点であり、円形選択範囲の中心になります。マウスを C から M にドラッグすると、画像内の点 U が点 X に変換されます。したがって、重要な問題は、上記の変換の逆変換を見つけることです。点 の場合、U のピクセル値を見つけます。このようにして、円形選択内の各ピクセルが評価されて、変換された画像が取得されます。

Andreas Gustafsson の Interactive Image Warping の記事では、次の逆変換式が示されています。

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

この変形アルゴリズムの特徴は次のとおりです:

1 円形の選択範囲内の画像のみが変形されます

2 円の中心に近づくほど, 変形が大きくなるほど、エッジに近づくほど変形が小さくなり、境界線には変形がありません

3 変形は滑らかです

具体的な実装手順は次のとおりです:

1 円形選択範囲内の各ピクセルに対して、その R、G、B を取り出します。各コンポーネントは 3 つのバフ (rBuff、gBuff、bBuff) に保存されます (つまり、3 つのバフは、元の画像の R、G、B チャネルの値をそれぞれ保存します)

2 円形選択の場合 ピクセルごとに R、G、B などのコンポーネント テキストを簡単に書くことができます - この種の問題を解決するには、コードではなくアイデアとアルゴリズムが重要です。

以下は私の実装デモです:

上の図では、左上隅が元の画像、右下隅が変形された画像です。赤い円は変形領域を囲みます。ご覧のとおり、変形は非常にスムーズです。上記のアルゴリズムに変形強度 s(strength) を導入しました。上の図では、strength=20 です。

強度を紹介します。式を変更する必要があります。これが私が変更した式です:

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

結果を見てください -

元の画像:

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

変形、強度= 20:

変形、強さ=120:

画像変形アルゴリズム: Photoshop Liquiify ツールボックスでの前方変形ツールの実装

PhotoshopとMeitu Xiuxiuのこの機能は、連続的に変形することができます。この連続的な変形は、一連の基本的な変形によって直列に接続されていると考えられます。つまり、マウスを M0 から Mn の位置にドラッグすると、M0 から Mn への変換が計算されるだけでなく、マウスの軌跡上に一連の中間変形が導入されます。点、M1、M2...Mn-1 を指定し、M0->M1、M1->M2、...、Mn-1->Mn などの一連の変換を画像上で実行します。

その他の画像変形アルゴリズムについては、Photoshop の液状化ツールボックスに順方向変形ツールを実装する方法については、PHP 中国語 Web サイトの関連記事に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート