問題タブ [radial-gradients]

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 スニペットを見てください。これがグラデーションを説明するすべてのデータです)

iPhone の CALayer 描画で奇妙な問題が発生しています。「泡」を表す一連のサブレイヤーを追加するルートレイヤーがあります。最終結果は次のようになります。

http://www.expensivedna.com/IMG_0018.PNG http://www.expensivedna.com/IMG_0018.PNG

問題は、レイヤーをアンチエイリアスにできないように見えることです (バブルのギザギザに注意してください)。バブル CALayer の drawInContext を上書きする私のコードは次のとおりです。

}

ここで非常に奇妙なのは、描画コードをわずかに変更して、次のように通常の赤い円のみを描画することです。

すべてがアンチエイリアスに問題ないようです:

http://www.expensivedna.com/IMG_0017.PNG http://www.expensivedna.com/IMG_0017.PNG

この一見奇妙な動作を理解できないようです。アンチエイリアシング グラデーションと通常の円の違いがわかりませんか?

みんなありがとう。

私はCSS3グラデーション（特に放射状のグラデーション）に頭を正しく向けようとしている最中です。そうすることで、私は自分自身を比較的難しい挑戦に設定したと思います。

Adobe Illustratorで、次の「ボタン」スタイルを作成しました。

この画像を作成するために、背景色がrgb(63,64,63)またはの長方形を作成し#3F403F、境界線の半径が15pxになるように「定型化」しました。

次に、不透明度25％、ぼかし8ピクセル、中央から白の「内部グロー」を適用しました。最後に、3ポイントの白いストロークを適用しました。（上の画像では不十分な場合に、再現したい場合に備えて、これらすべてをお伝えします。）

したがって、私の質問は次のとおりです。

画像を必要とせずにCSSを使用してこの「ボタン」を再作成することは可能ですか？

私はInternetExplorerの「制限」を知っています（そしてこの実験のために、私はサルを与えることができませんでした）。また、Webkitの小さな「バグ」が、背景色、境界線の半径、および境界線（背景色とは異なる色）の要素を誤ってレンダリングすることにも気づいています。これにより、曲線上で背景色がにじみ出てきます。コーナー。

これまでの私の最善の試みはかなり哀れですが、参考のためにここにコードがあります：

基本的に、ひどい。ヒントやコツはありがたく受け入れてくれて、よろしくお願いします！

このように別の円にいくつかの円を描きたい：

代替テキストhttp://img38.imageshack.us/img38/6379/circles.png

RadialGradientBrushにグラデーションを使用せず、固定色のみを使用するように指示する方法はありますか？これを実現できますか？ヒントをありがとう！

（これはDrawingBrushを使用して簡単に実行できると思いますが、RadialGradientBrushを使用してこれを実行できるかどうか疑問に思っています）

放射状グラデーションをアニメーション化して、脈動しているかのように、内側の半径を縮小および拡大したいと考えています。

現在、CGGradient でグラデーションをレンダリングしていますが、アニメーション化する方法がわかりません。このトピック見ました

iPhone で Quartz を使用してグラデーションをアニメーション化できますか?

これは、CAGradientLayer を使用して線形グラデーションをアニメーション化する方法を説明していますが、放射状グラデーションを描画するようには見えません。

CGGradient をアニメーション化する簡単な方法、または放射状グラデーション CAGradientLayer を作成する方法はありますか?

どんな考えでも大歓迎です。

次のコードを試しましたが、最後の行でエラーが発生します*エラー引数「1」：「System.Windows.Media.RadialGradientBrush」から「System.Drawing.Brush」に変換できません* VisualStudio2008 を使用し
ています

楕円を放射状のブラシで塗りつぶす方法を教えてもらえますか？

3 つのグラデーションを 1 つの -webkit-gradient に結合できますか? 「背景」と「中景」の放射状グラデーションと「前景」の線形グラデーションを持つ画像が必要です。これは可能ですか？

このスタイル属性をbodyタグに添付しました：

そして、ページのスクロールは非常に難しくなりました-それは遅れてゆっくりとスクロールしていました。そうなのか？

編集：スクロールだけでなく、他のすべてのjquery効果も遅くなります。

CSS3 Pie や CSS3Please などのツールのおかげで、クロスブラウザー CSS を作成できるようになりました。

しかし、私はまだ 2 つの領域で立ち往生しています (もちろん Internet Explorer のため):

• 放射状グラデーション
• 回転と角丸を組み合わせる

これらの問題に対処する方法についての指針をいただければ幸いです。

私の目的は、CSS クロス ブラウザーの円グラフを作成することです。

テクスチャ イメージでタイル張りされた背景のオーバーレイとして複数の css3 グラデーションを使用する Web サイトに取り組んでいます

サイトの URL: --snipped--

現在、ヘッダーには次のcssを使用しています:

ここで headerBg.png は、サイズ 5x5 ピクセルの半透明のテクスチャです。この背景を作成する必要がある body の広告です。

CSS3 でこの種の放射状の背景を作成する方法を知る必要があります。最初はヘッダーと同じコードを使用していましたが、色には rgba() を使用し、グラデーションの終わりを不透明度 0 に設定しましたが、ノイズが多すぎました。

CSS3 ラジアル バックグラウンド用のオンライン ジェネレーターもいくつか試しましたが、どれもうまくいきませんでした。

私が使用しているこの画像は 280kbs を占めており、パフォーマンスに大きな影響を与えるため、削減したいと考えています! 助けていただければ幸いです。

アップデート：

psd をアップロードします。http: //ylspeaks.com/stackoverflow_css3.zipからダウンロードできます。

賞金の追加