問題タブ [gradient]

2 つの RGB カラーと長方形の領域が与えられた場合、色間に基本的な線形グラデーションを生成したいと思います。簡単な検索を行ったところ、見つけられたのはこのブログ エントリだけでしたが、サンプル コードが見つからないか、少なくともこの投稿の時点ではそうでした。アルゴリズム、コード例、何でも役立ちます。これは Java で記述されますが、表示層は既に処理されているため、何を表示するかを理解する方法を理解する必要があります。

わかりました、今日の狭い質問です。GflAx ( xnview から)を使用してグラフィック タイルを作成しています。私はいくつかのグラデーションも入れたいと思っています。

この製品内でこれを行う方法はありますか?

この製品の一部である SDK もありますが、その情報は見つかりません。

画像の周りにアルファ ブレンドされたグラデーションの境界線を配置する必要があります。私の問題は、コーナーをブレンドして、水平方向と垂直方向のグラデーションが交わる場所を滑らかにすることです。この問題を解決する標準アルゴリズムがあると思います。何年も前に学校で遭遇したと思います。しかし、いくつかの Web 検索で 1 つの参照を見つけることができませんでした。

(隅に放射状の塗りつぶしパターンを実装しましたが、遷移はまだ十分にスムーズではありません。)

私の質問:

1. この問題の標準アルゴリズムがある場合、その名前は何ですか? さらに良いことに、どのように実装されていますか?

2. 標準的なアルゴリズムを使用せずに、角に滑らかなグラデーションを生成するために必要なピクセル値を決定する最良の方法は何ですか? （縦のグラデーションから横のグラデーションにスムーズに移行します。）

編集：大きな画像の上に挿入する画像があると想像してください。大きい画像は黒一色で、小さい画像は白一色です。挿入する前に、小さな画像にアルファ値を設定してその周りに透明な「境界線」を作成し、大きな画像に「フェード」することで、小さな画像を大きな画像にブレンドしたいと考えています。正しく行うと、黒から白への滑らかなグラデーションが得られます。コーナーと内側のエッジを除くすべての場所で行います。

画像の中央近くのグラデーション境界の端では、値は 255 になります (透明ではありません)。境界が外側の端に近づくにつれて、アルファ値は 0 に近づきます。頂点と水平の境界が交わる画像のコーナーでは、対角線に相当するものになります。その線引きをなくしてスムーズに移行したい。

私が必要としているのは、水平エッジと垂直エッジが交差するときに画像の隅で重なる各ピクセルのアルファ値 (0 ～ 255) を決定するアルゴリズムです。

Internet Explorer にはいくつかの独自の拡張機能があり、グラデーションの背景を持つ div を作成するなどのことができることを知っています。要素名またはその使用法を思い出せません。誰かがいくつかの例やリンクを持っていますか?

AS3 (Flash) を使用してSVG ファイルを読み取り、表示しています。問題は、線形/放射状グラデーションを正しく表示しています。

以下は、 SVG での赤から青への単純な線形グラデーションの例です。

グラデーション (ストップのスタイル) からの色と、グラデーション (ストップのオフセット) の間隔を読み取ることができました。

さて、これで、適切な色と適切な量のスペースを備えた素敵なグラデーションができましたが、回転やスケールはなく、位置がずれています! .

答えは、 Matrixを Flash のグラデーション関数にフィードすることです。

方法 1: 提供されたマトリックスを使用する

SVG によって提供されるマトリックス、gradientTransform="matrix(a,b,c,d,e,f)"は事実上役に立たないように見えます。そのマトリックスを Flash のbeginGradientFill() 関数にフィードすると、シェイプ上に引き伸ばされたグラデーションが表示されるためです。塗りつぶしのように、グラデーションの中心の色だけが表示されます。

方法 2: 2 つのグラデーション ポイントを使用してマトリックスを生成する

• x1、y1タグは、グラデーションが始まる画面上のポイントである可能性があります。
• x2、y2タグは、グラデーションが終了する画面上のポイントである可能性があります。

「2 つのグラデーション ポイント」と言うとき、私は x1、y1 と x2、y2 を指しています。これらは主に、形状のどこでグラデーションの開始と終了を行うかを示しています。

グラデーションで使用するマトリックスを作成するMatrix.createGradientBox()関数がありますが、パラメーターはSVG が提供するものとは大きく異なります。それは欲しい：

1. 幅--- ここでは 2 つのグラデーション ポイント間の相対距離を使用します (X 軸)
2. 高さ --- ここでは 2 つのグラデーション ポイント (Y 軸) 間の相対距離を使用しましたが、間違った結果が得られました --- ここでも2 つのグラデーション ポイント間の距離を使用しようとしましたが、幅に何を入力すればよいかわかりませんでした!
3. 回転角度-- 2 つのグラデーション ポイントの角度 (ラジアン単位) を使用したため、結果が正しくありません!
4. Translation x -- 最初のグラデーション ポイントの X を試し、0 も試しましたが、結果が正しくありません!
5. Translation y -- 最初のグラデーション ポイントの Y を試し、0 も試しましたが、結果が正しくありません!

Flash のグラデーション マトリックスを生成するために使用できる SVG データは何ですか?

(上記の SVG スニペットを見てください。これがグラデーションを説明するすべてのデータです)

css/html/javascript のみでグラデーションを実行し、すべての主要なブラウザーで機能する方法はありますか? (MS IE 5 以降、Firefox、Opera、Safari)?

編集：背景（ヘッダー、メインパネル、サイドパネル）に対してこれを行いたいと思います。また、縦線のグラデーションも欲しいです。

編集: 応答を読んだ後、これを Javascript ソリューションにも開放しましょう。HTML/CSS だけでは実現が難しくなるためです。

画像を動的に生成する必要があるカラーピッカーを作成しようとしていますが、ラスター画像よりも SVG を生成する方がはるかに簡単であると考えました。残念ながら、ピッカーの中心となる大きな 2 次元グラデーションを表現する方法がわかりません。

たとえば、現在選択されている軸が青と緑の場合、左下隅が黒、左上隅が青、右下が緑、右上がシアンの正方形をペイントする必要があります。

塗りつぶされた 2 つの正方形を重ねて不透明度をいじることでこれを達成する方法がある場合linearGradient、私はそれを解決できませんでした。また、始点と終点の色が他のグラデーションであるグラデーションを作成しようとしましたが (私が巧妙であることを願っています)、「大きな黒い何もない」ものしか得られませんでした。これまでのところ、Google 検索はどこにも行きませんでした。

サイズと複雑さが増し、うまくサイズ変更できないと思われるため、256 個の 1 ピクセルの高グラデーションのスタックに頼りたくありません。おそらく、SVG の実用的な知識をもう少し持っている人が何かを提案できます

ReportLab (python)を使用して PDF にグラデーション塗りつぶしを作成することは可能ですか?

If you use this code in Silverlight and WPF you get slightly different results?

In Silverlight you do not get a solid black Button. You get a vertical white-to-black gradient. How do you force this to be a solid color?

As a follow up, is their a similar method to counteract the annoying way Vista "decorates" buttons with the lightblue hover effect.

Thanks.

Raphael JS グラフィック ライブラリを使用しようとしていました。オブジェクトを受け入れる必要がある属性 gradient を使用したいと思います。ドキュメントには、SVG 仕様を参照するよう記載されています。たとえば、SVGでグラデーションオブジェクトを見つけました

しかし、どうすれば私のjavascript内からそれを参照できますか?

動作しません:)事前に感謝します