JPH05324855A

JPH05324855A - 陰影表示方式

Info

Publication number: JPH05324855A
Application number: JP4126994A
Authority: JP
Inventors: Narishiro Ariga; 成城有我
Original assignee: PFU Ltd
Current assignee: PFU Ltd
Priority date: 1992-05-20
Filing date: 1992-05-20
Publication date: 1993-12-10

Abstract

(57)【要約】【目的】本発明は、部品の陰影を表示する陰影表示方
式に関し、部品の基本色をもとに部品の辺の上方などか
ら光を照射したときの陰影色を自動的に生成して表示
し、部品の陰影表示をより現実的でリアルに行い、使用
感の良いグラフィカルユーザインタフェイスを提供する
ことを目的とする。【構成】部品の形状、基本色を予め設定する部品形状
データ４と、部品の陰影色を生成する比率を予め設定す
る陰影色演算用データテーブル５とを備え、部品形状デ
ータ４の基本色をもとに、陰影色演算用データテーブル
５から取り出した比率に従って、部品の各辺の色（例え
ばＲＢＧ値）を演算し、表示するように構成する。

Description

【発明の詳細な説明】

【０００１】

【産業上の利用分野】本発明は、部品の陰影を表示する
陰影表示方式に関するものである。

【０００２】

【従来の技術】対話型アプリケーションは、ボタン、ス
ライダなどの部品をディスプレイ上に表示し、これをポ
インティングデバイスで選択するなどの方法で操作を行
う、グラフィカルユーザインタフェイスが採用されてき
ている。グラフィカルユーザインタフェイスは、ユーザ
に判り易い、感覚的な操作を可能にするために使用され
ており、ボタンなどをより現実的に表示し、感覚的な視
認性を高める必要がある。

【０００３】現在では、情報処理装置にカラービットマ
ップディスプレイという、色々な絵を自由に表示できる
装置が標準的に利用されており、グラフィカルユーザイ
ンタフェイスをよりリアルにする環境が整ったといえ
る。そこで、スイッチやボタン、入出力のための矩形領
域などをリアルに表示し、視認性を高めるためには、こ
れらの表示部品に陰影を付け、立体的に見えるようにす
ることが効果的である。

【０００４】従来、このような立体的陰影づけは、左上
方から光が到達すると、例えば凸である部品の場合、図
７のように上辺と左辺を白、下辺と右辺を黒で縁取りす
ることによって実現していた。

【０００５】

【発明が解決しようとする課題】上述のように表示し、
部品を立体的に見せるために陰影を付け、図７に示すよ
うに、白と黒を使用した縁取りを行うのであるが、この
縁となる部分の幅を適度にして効果的にする必要があ
る。左のボタンは縁の部分の幅を狭くし、右のボタンは
縁の部分を広くした例を示す。また、部品の色が灰色で
はなく、例えば赤いボタンであった場合、このボタンの
縁の部分の上辺、左辺を白、下辺、右辺を黒とするとい
った陰影を白と黒の２色で塗ったのでは、不自然であっ
て綺麗に見えないという問題があった。このため、ボタ
ンなどの部品の基本色に対応した陰影を自動的に表示す
ることが望まれている。

【０００６】本発明は、これらの問題を解決するため、
部品の基本色をもとに部品の辺の上方などから光を照射
したときの陰影色を自動的に生成して表示し、部品の陰
影表示をより現実的でリアルに行い、使用感の良いグラ
フィカルユーザインタフェイスを提供することを目的と
している。

【０００７】

【課題を解決するための手段】図１を参照して課題を解
決するための手段を説明する。図１において、陰影表示
部３は、部品２に基本色に対応した陰影色を表示するも
のである。

【０００８】部品形状データ４は、部品２の形状、基本
色および輪郭幅を予め設定したものである。陰影色演算
用データテーブル（１）５は、部品２の陰影色を生成す
る比率を予め設定したものである。

【０００９】陰影色演算用データテーブル（２）６は、
光源の方位ベクトルおよび部品の辺の角度θを予め設定
したものである。

【００１０】

【作用】本発明は、図１に示すように、陰影表示部３が
部品形状データ４から取り出した基本色をもとに、陰影
色演算用データテーブル（１）５から取り出した比率に
従って、部品２の各辺の色（例えばＲＢＧ値）を演算
し、表示するようにしている。

【００１１】また、陰影表示部３が部品形状データ４か
ら取り出した基本色をもとに、陰影色演算用データテー
ブル（２）６から取り出した光源の方位ベクトルおよび
部品の辺の角度θに従って、部品の各辺の色（例えばＲ
ＢＧ値）を演算し、表示するようにしている。

【００１２】この際、部品形状データ４に予め設定した
輪郭幅だけ、演算した陰影色で表示するようにしてい
る。従って、部品２の基本色をもとに辺の左上方などか
ら光を照射したときの陰影色を自動的に生成して表示す
ることにより、部品２の陰影表示をより現実的でリアル
に行い、使用感の良いグラフィカルユーザインタフェイ
スを提供することが可能となる。

【００１３】

【実施例】次に、図１から図６を用いて本発明の実施例
の構成および動作を順次詳細に説明する。

【００１４】図１は、本発明の１実施例構成図を示す。
図１において、ウィンドウ１は、ボタンやスイッチなど
の部品２をグラフィカルに表示するウィンドウであっ
て、これらの部品２を押下などして所定の処理（コマン
ド起動）を行ったりなどするためのウィンドウである。

【００１５】部品２は、ボタンやスイッチなどの各種操
作を指示したり、その結果を表示したりするものであっ
て、グラフィカルユーザインタフェイスを実現するため
の各種部品である。

【００１６】陰影表示部３は、部品２に陰影色を自動的
に生成して表示するものであって、部品形状データ４、
陰影色演算用データテーブル５、６を参照し、部品２の
辺の陰影色を生成して表示するものである。

【００１７】部品形状データ４は、部品の形状、位置、
基本色、輪郭幅などを予め設定したものである。ここ
で、形状は、部品の形状であって、矩形、三角形などの
形状である。位置は、部品のウィンドウ上の相対的な位
置である。基本色は、部品の色であって、例えばＲＧＢ
値によって表現する色である。輪郭幅は、部品の縁に陰
影を付与する辺の輪郭幅であって、例えば８ピクセル
（８画素）である。

【００１８】陰影色演算用データテーブル（１）５は、
部品の陰影色を生成する比率を予め設定したテーブルで
ある。ここで、上辺用内分比率は上辺（上段の部品２の
説明参照）の内分比率であって、白色（Ｒ＝Ｇ＝Ｂ＝
１．０）と基本色との間の色を按分するものである（図
３、図４を用いて後述する）。左辺用内分比率、下辺用
内分比率、右辺用内分比率も同様である。これら各内分
比率で按分した色で、上辺、左辺、下辺、右辺を表示す
る。これにより、部品２の基本色に対応した陰影色を付
与して表示でき、リアルな立体表示を行うことが可能と
なる。

【００１９】陰影色演算用データテーブル（２）６は、
光源の方位ベクトルおよび部品の辺の角度θを予め設定
したものである。ここで、光源の方位ベクトルは、図６
に示すように、光源の方位を表すベクトルである。ベー
スに対する立ち上がり角度θは、既述した部品２の辺の
角度θに対応し、図６の（ａ）に示すように、ベースに
対する辺（上辺、下辺、左辺、右辺）の角度θである。
このベースに対する立ち上がり角度θとしたときの各辺
の法線と、光源の方位ベクトルとが一致するときに最も
明るく当該辺を色表示する。

【００２０】まず、陰影色演算用データテーブル（１）
５を用いたときの図１の構成の動作を、図２から図４を
用いて詳細に説明する。図２は、本発明の動作説明フロ
ーチャートである。

【００２１】図２において、Ｓ１は、部品全体を指定の
部品色で塗りつぶす。これは、図１のウィンドウ１内の
部品２を基本色で全体を塗りつぶす。具体的に言えば、
ウィンドウ１内の、例えば図１のボタンの部品形状デー
タ４を参照し、位置情報で指定された、左上座標（１０
０、１５０）、右下座標（２００、２５０）に形状情報
で指定された矩形内の全体を、基本色情報で指定された
“Ｒ＝０．７、Ｇ＝０．５、Ｂ＝０．２”の基本色によ
って塗りつぶす。

【００２２】Ｓ２は、部品色（基本色）のＲＧＢ値を３
次元空間内の点とし、ｏに格納する（図３の（ａ）、
（ｂ）の基本色のＲＧＢ値をｏに格納する）。Ｓ３は、
白色のＲＧＢ値（Ｒ＝Ｇ＝Ｂ＝１）を３次元空間内の点
とし、ｗに格納する（図３の（ａ）の白色（Ｗｈｉｔ
ｅ）のＲ＝Ｇ＝Ｂ＝１値をｗに格納する）。

【００２３】Ｓ４は、黒色のＲＧＢ値（Ｒ＝Ｇ＝Ｂ＝
０）を３次元空間内の点とし、ｂに格納する（図３の
（ｂ）の黒色（Ｂｌａｃｋ）のＲ＝Ｇ＝Ｂ＝０値をｂに
格納する）。

【００２４】以上によって、図３の（ａ）、（ｂ）の基本色＝ｏ白色＝ｗ黒色＝ｂとなる。

【００２５】Ｓ５は、ｏとｗを上辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｕとする。ここで、Ｕ＝（３ｗ＋ｏ）／４・・・・・・・・・・・・・・・・・・・・・（１）である。これは、図１の陰影色演算用データテーブル
（１）５から、上辺用内分比率が３：１であるので、図
３の（ａ）で求める内分点の色Ｕとすると、（Ｕ−ｏ）：（ｗ−Ｕ）＝３：１となり、この内分点の色Ｕを、上式（１）と求めたもの
である。

【００２６】Ｓ６は、ｏとｗを左辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｌとする。ここで、Ｌ＝（２ｗ＋ｏ）／３・・・・・・・・・・・・・・・・・・・・・（２）である。これは、図１の陰影色演算用データテーブル
（１）５から、左辺用内分比率が２：１であるので、図
３の（ａ）で求める内分点の色Ｌとすると、（Ｌ−ｏ）：（ｗ−Ｌ）＝２：１となり、この内分点の色Ｕを、上式（２）と求めたもの
である。

【００２７】Ｓ７は、ｏとｂを下辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｄとする。ここで、Ｄ＝（３ｂ＋ｏ）／４・・・・・・・・・・・・・・・・・・・・・（３）である。これは、図１の陰影色演算用データテーブル
（１）５から、下辺用内分比率が３：１であるので、図
３の（ｂ）で求める内分点の色Ｄとすると、（ｏ−Ｄ）：（Ｄ−ｂ）＝３：１となり、この内分点の色Ｄを、上式（３）と求めたもの
である。

【００２８】Ｓ８は、ｏとｂを右辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｒとする。ここで、Ｒ＝（２ｂ＋ｏ）／３・・・・・・・・・・・・・・・・・・・・・（４）である。これは、図１の陰影色演算用データテーブル
（１）５から、右辺用内分比率が２：１であるので、図
３の（ｂ）で求める内分点の色Ｒとすると、（ｏ−Ｒ）：（Ｒ−ｂ）＝２：１となり、この内分点の色Ｒを、上式（４）を求めたもの
である。

【００２９】Ｓ９は、色Ｕによって部品２の上側の指定
された幅の領域を塗りつぶす。これにより、図１のウィ
ンドウ１内の部品２の上辺と記載した部分を、色Ｕで塗
りつぶし、陰影をつける。

【００３０】Ｓ１０は、色Ｌによって部品２の左側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の左辺と記載した部分を、色Ｌで
塗りつぶし、陰影をつける。

【００３１】Ｓ１１は、色Ｄによって部品２の下側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の下辺と記載した部分を、色Ｄで
塗りつぶし、陰影をつける。

【００３２】Ｓ１２は、色Ｒによって部品２の右側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の右辺と記載した部分を、色Ｒで
塗りつぶし、陰影をつける。

【００３３】以上によって、部品色（基本色）で部品２
の全体を塗りつぶし、次に上辺、左辺、下辺、右辺の色
Ｕ、Ｌ、Ｄ、Ｒについて、図１の陰影色演算用データテ
ーブル（１）５を参照して上辺用内分比率、左辺用内分
比率、下辺用内分比率、右辺用内分比率をもとに算出
し、これら色Ｕ、Ｌ、Ｄ、Ｒによって、部品形状データ
４の輪郭幅（ここでは８ピクセル）分の上辺、左辺、下
辺、右辺の部分を塗りつぶし、図１の部品２に示すよう
に表示する。これにより、陰影色演算用データテーブル
（１）５に各辺の内分比率を設定および部品形状データ
４に輪郭幅を設定すると、陰影表示部３が自動的に部品
２に陰影を付与して表示することとなる。

【００３４】図３は、本発明の各辺の色の算出説明図を
示す。図３の（ａ）は、上辺、左辺の色の算出説明図を
示す。ここで、Ｒ（Ｒｅｄ）、Ｂ（Ｂｌｕｅ）、Ｇ（Ｇ
ｒｅｅｎ）を座標系とし、部品２の色を基本色ｏ、白色
ｗ（Ｗｈｉｔｅ）とし、内分点の上辺の色Ｕ、左辺の色
Ｌとして算出するときのものである（式（１）、式
（２）参照）。

【００３５】図３の（ｂ）は、下辺、右辺の色の算出説
明図を示す。ここで、Ｒ（Ｒｅｄ）、Ｂ（Ｂｌｕｅ）、
Ｇ（Ｇｒｅｅｎ）を座標系とし、部品２の色を基本色
ｏ、黒色ｂ（Ｂｌａｃｋ）とし、内分点の下辺の色Ｄ、
右辺の色Ｒとして算出するときのものである（式
（３）、式（４）参照）。

【００３６】図４は、本発明の内分説明図を示す。図４
の（ａ）は、上辺の色Ｕの内分の様子を示す。これは、
図１の陰影色演算用データテーブル（１）５から上辺用
内分比率が３：１を取り出したときのものであって（図
３の（ａ）参照）、（Ｕ−ｏ）：（ｗ−Ｕ）＝３：１となる。従って、既述した式（１）が得られる。

【００３７】図４の（ｂ）は、左辺の色Ｌの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から左辺用内分比率が２：１を取り出したとき
のものであって（図３の（ａ）参照）、（Ｌ−ｏ）：（ｗ−Ｌ）＝２：１となる。従って、既述した式（２）が得られる。

【００３８】図４の（ｃ）は、下辺の色Ｄの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から下辺用内分比率が３：１を取り出したとき
のものであって（図３の（ｂ）参照）、（ｏ−Ｄ）：（Ｄ−ｂ）＝３：１となる。従って、既述した式（３）が得られる。

【００３９】図４の（ｄ）は、右辺の色Ｒの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から右辺用内分比率が２：１を取り出したとき
のものであって（図３の（ｂ）参照）、（ｏ−Ｒ）：（Ｒ−ｂ）＝２：１となる。従って、既述した式（４）が得られる。

【００４０】次に、陰影色演算用データテーブル（２）
６を用いたときの図１の構成の動作を、図５および図６
を用いて詳細に説明する。図５は、本発明の他の動作説
明フローチャートである。

【００４１】図５において、Ｓ２１は、部品全体を指定
の部品色（基本色）で塗りつぶす。これは、図１のウィ
ンドウ１内の部品２を基本色で全体を塗りつぶす。具体
的に言えば、ウィンドウ１内に、図１のボタンの部品形
状データ４を参照して、位置情報で指定された、左上座
標（１００、１５０）、右下座標（２００、２５０）に
形状情報で指定された矩形内の全体を、基本色情報で指
定された“Ｒ＝０．７、Ｇ＝０．５、Ｂ＝０．２”の基
本色によって塗りつぶす。

【００４２】Ｓ２２は、上辺に対応する面の法線ベクト
ルを、ベースに対する立ち上がり角度θから求める。こ
れは、図６の（ｂ）に示すように、図１の陰影色演算用
データテーブル（２）６から取り出したベースに対する
立ち上がり角度θ＝４０°のときに、この立ち上がり角
度θ＝４０°の面の法線ベクトルを図示のように求め
る。

【００４３】Ｓ２３は、上辺に対応する法線ベクトル
と、光源の方位ベクトルから面の明るさを求める。これ
は、光源の方位ベクトルと、求めた上辺の法線ベクトル
とが一致したときに最大の明るさとし、ずれるに従い暗
くするように面（辺）の明るさを求める。

【００４４】Ｓ２４は、上辺に対応する面の明るさと基
本色から上辺の陰影色を求める。これは、Ｓ２３で求め
た上辺の面の明るさをもとに、基本色と白色を内分した
陰影色を求める。

【００４５】同様に、Ｓ２５、Ｓ２６、Ｓ２７によっ
て、左辺の陰影色を求める。Ｓ２８、Ｓ２９、Ｓ３０に
よって、下辺の陰影色を求める。

【００４６】Ｓ３１、Ｓ３２、Ｓ３３によって、右辺の
陰影色を求める。Ｓ３４は、求めた陰影色で部品の輪郭
の指定された幅の領域（辺）を塗りつぶす。これは、図
６の（ａ）のウィンドウ１内の部品２について、図１の
部品形状データ４の輪郭幅分の幅を持つ上辺、左辺、下
辺、右辺の領域をそれぞれの陰影色で塗りつぶし、陰影
をつける。

【００４７】以上によって、部品色（基本色）で部品２
の全体を塗りつぶし、次に光源の方位ベクトルと、ベー
スに対する立ち上がり角度θによって決まる部品２の各
辺の法線ベクトルとによって各面の明るさを求め、これ
ら各面の明るさに対応する各辺の陰影色をそれぞれ求
め、これら陰影色によって、部品形状データ４の輪郭幅
（ここでは８ビクセル）分の上辺、左辺、下辺、右辺の
部分を塗りつぶし、図６の（ａ）の部品２に示すように
陰影表示する。これにより、陰影色演算用データテーブ
ル（２）６の光源の方位ベクトルおよびベースに対する
立ち上がり角度θ、更に部品形状データ４に輪郭幅を設
定すると、陰影表示部３が自動的に部品２に陰影を付与
して表示することとなる。

【００４８】図６は、本発明の他の動作説明図を示す。
図６の（ａ）は、ウィンドウ１内に部品２を陰影表示し
た例を示す。ここで、座標を右側に記載したように、
Ｘ、Ｙ、Ｚとする。

【００４９】図６の（ｂ）は、ベースに対する立ち上が
り角度θを示す。これは、図１の陰影色演算用データテ
ーブル（２）６に設定する、ベースに対する立ち上がり
角度θを模式的に表したものであって、部品２のベース
に対して図示θをベースに対する立ち上がり角度とす
る。また、部品形状データ４に設定する輪郭幅は、図示
のように、Ｘ方向（Ｙ方向）の幅である。

【００５０】

【発明の効果】以上説明したように、本発明によれば、
部品２の基本色をもとに辺の左上方などから光を照射し
たときの陰影色を自動生成して表示する構成を採用して
いるため、部品の基本色に従った明るい色および暗い色
の陰影色を付与して表示でき、より現実的でリアルな表
示を行い、使用感の良いグラフィカルユーザインタフェ
イスを提供することができる。特に、（１）部品形状データ４に輪郭幅を設けて任意に設定
可能としているため、部品の陰影色を表示する辺の幅を
容易に調整できる。

【００５１】（２）陰影色演算用データテーブル
（１）５に上辺、左辺、下辺、右辺など毎に内分比率を
任意に設定可能としているため、陰影を付与する光線の
方向を容易に調整できる。

【００５２】（３）陰影色演算用データテーブル
（２）６に光源の方位ベクトルおよびベースに対する立
ち上がり角度θなどを設定し、部品を疑似的に３次元構
造としたときに、光源の方位ベクトルの方向から照射し
たときの明るさに対応する陰影色で、部品の陰影表示を
行っているため、３次元感覚のよりリアルな陰影表示を
簡単な演算処理によって実現できる。

【図面の簡単な説明】

【図１】本発明の１実施例構成図である。

【図２】本発明の動作説明フローチャートである。

【図３】本発明の各辺の色の算出説明図である。

【図４】本発明の内分説明図である。

【図５】本発明の他の動作説明フローチャートである。

【図６】本発明の他の動作説明図である。

【図７】従来技術の説明図である。

【符号の説明】

１：ウィンドウ２：部品３：陰影表示部４：部品形状データ５：陰影色演算用データテーブル（１）６：陰影色演算用データテーブル（２）ｏ：部品の基本色ｗ：白色ｂ：黒色Ｕ：上辺の陰影色Ｄ：下辺の陰影色Ｌ：左辺の陰影色Ｒ：右辺の陰影色

Claims

【特許請求の範囲】

【請求項１】部品の陰影を表示する陰影表示方式におい
て、部品の形状、基本色を予め設定する部品形状データ
（４）と、部品の陰影色を生成する比率を予め設定する陰影色演算
用データテーブル（５）とを備え、上記部品形状データ（４）の基本色をもとに、上記陰影
色演算用データテーブル（５）から取り出した比率に従
って、部品の各辺の色（例えばＲＢＧ値）を演算し、表
示するように構成したことを特徴とする陰影表示方式。
【請求項２】部品の陰影を表示する陰影表示方式におい
て、部品の形状、基本色を予め設定する部品形状データ
（４）と、光源の方位ベクトルおよび部品の辺の角度θを予め設定
した陰影色演算用データテーブル（６）とを備え、上記部品形状データ（４）の基本色をもとに、上記陰影
色演算用データテーブル（６）から取り出した光源の方
位ベクトルおよび部品の辺の角度θに従って、部品の各
辺の色（例えばＲＢＧ値）を演算し、表示するように構
成したことを特徴とする陰影表示方式。
【請求項３】上記部品形状データ（４）に部品の形状、
基本色の他に輪郭幅を予め設定しておき、上記演算した
色で当該輪郭幅だけの辺を表示するように構成したこと
を特徴とする請求項１記載および請求項２記載の陰影表
示方式。