チケット #13571

グラデーション処理の改良
登録: 2008-09-26 01:02 最終更新: 2008-11-19 20:01

報告者:
担当者:
チケットの種類:
状況:
完了
コンポーネント:
(未割り当て)
マイルストーン:
(未割り当て)
優先度:
5 - 中
重要度:
5 - 中
解決法:
修正済み
ファイル:
1

詳細

修正だけでなく提案も含んでいますが、検討してみて下さい。
リビジョン 511 から書き換えた分のコードを添付しておきます。

・放射状グラデーションを gradientTitle を用いた方式に変更

・colors 属性を用いると opacity の意味が逆になる VML のバグ
に対処

・グラデーション設定後に opacity の設定を上書きしていたバグを
修正

・グラデーションの ID に英数字以外の文字が使えなかったのを修正

・stop-opacity にも opacity, fill-opacity の値を掛けるよ
う修正

・method を sigma から none に変更

・offset の値は 0.0~1.0 の数値でもよいので、百分率に変換す
る処理を削除

・その他コードの整理


まだ以下の点が気になっていますが、今のところは未対応です。

・VML では stroke にグラデーションは効かないが、現在は fill
のグラデーションの処理を流用してごまかしている

・radialGradient の cx, r, fx などの設定は無視している


現在の SIE の放射状グラデーションには、いくつかの制限がありま
す。

・3色以上のグラデーションに対応できない
・グラデーションの焦点の位置を設定することができない
・仕組み上、本来の色より暗く表示される場合がある

この問題を解決するために、別の方法で radialGradient の実装を
してみました。
VML で gradientRadial と設定すると、グラデーションの形は四角
になってしまいますが、gradientTitle という設定にすると、グラ
デーションはその図形と同じ形になるようです。
http://openclipart.org/media/files/Chrisdesign/3587
や 4wd.svg あたりを表示してみると、場合にもよりますがそれなり
に良い表示結果が得られます。
この方法では rect 要素のグラデーションが四角になってしまいます
が、もう一手間かければ改良することも可能です。

opacity の意味が逆になるバグについては、場合分けが大変なの
で、常に color, color2, colors の全てを設定するようにしまし
た。

ID 属性にはハイフンやコロンなどの文字も使えるようなので、正規
表現の部分を少し変えています。

method が sigma だと他のブラウザと微妙に表示が異なります。
none に設定するのが正解のようです。

チケットの履歴 (5 件中 3 件表示)

2008-09-26 01:02 更新者: revulo
  • 添付ファイル 3473: sie_gradientTitle.zip が付加されました
2008-09-26 19:53 更新者: dhrname
  • 担当者(未割り当て) から dhrname に更新されました
  • 優先度5 - 中 から 8 に更新されました
  • 解決法なし から 受領 に更新されました
コメント
Logged In: YES
user_id=32883

ありがとうございます。検討してみましょう。
なお、送信されたコードはSIEと同じライセンスで処理
します。
2008-09-26 21:18 更新者: dhrname
  • 優先度8 から 9 - 最高 に更新されました
コメント
Logged In: YES
user_id=32883

リビジョン516で対応しました。

表示の仕方が変わるなど大幅な修正であるため、0.32で
はなく、その次のリリースで反映させるつもりです。
2008-10-14 19:58 更新者: dhrname
  • 解決法受領 から 修正済み に更新されました
  • 優先度9 - 最高 から 8 に更新されました
2008-11-19 20:01 更新者: dhrname
  • 状況オープン から 完了 に更新されました
  • 優先度8 から 5 - 中 に更新されました
  • チケット完了時刻2008-11-19 20:01 に更新されました

添付ファイルリスト

編集

ログインしていません。ログインしていない状態では、コメントに記載者の記録が残りません。 » ログインする