JP6151166B2 - 電子機器および表示方法 - Google Patents

Description

本発明の実施形態は、手書きによって線を表示する技術に関する。

近年、タブレット、ＰＤＡ、スマートフォンといった種々の電子機器が開発されている。この種の電子機器の多くは、ユーザによる入力操作を容易にするために、タッチスクリーンディスプレイを備えている。また、最近では、スタイラスによって線等を入力することが可能な電子機器も開発されている。

スタイラスで入力する場合、ペン種を指定することによって、タッチスクリーンディスプレイに描画される線を変更することが可能である。例えば、線の色を変えたり、線幅を変えたり、線の種類を変えたりすることができる。

特開平６−１７５７７７号公報

タッチスクリーンディスプレイに線を描画している時に、ペン種によっては、タッチスクリーンディスプレイに表示されている途中の線の見た目に、ユーザが違和感を抱くことがある。

本発明の一形態の目的は、表示途中の線の見た目に違和感を抱くことを抑制することが可能な電子機器および表示方法を提供することにある。

実施形態によれば、電子機器は、ディスプレイのセンサ面上への接触に応じた線を描画可能である。電子機器は、表示処理手段を具備する。表示処理手段は、センサ面上の単一の接触点の位置とその軌跡に基づいた複数の線を表示するとともに、前記複数の線の少なくとも一部の線上であって単一の接触点の位置の近傍の領域に前記複数の線の色に対応する色のオブジェクトを表示する。前記複数の線の太さは、接触点の圧力に応じて異なる。

実施形態の電子機器の構成の一例を示す斜視図。 実施形態の電子機器のシステム構成の一例を示すブロック図。 同実施形態の電子機器によって実行される手書きノートアプリケーションプログラムの機能構成の一例を示すブロック図。 線種が毛筆の場合に、描画される線の一例を示す図。 線種が毛筆の場合に、描画されるマスクオブジェクトの一例を示す図。 線種が毛筆の場合に、表示される線とマスクオブジェクトとの一例を示す図。 線が書き終わった状態の一例を示す図。 毛筆によって描画される文字の一例を示す図。 毛筆によって描画される文字の一例を示す図。 毛筆によって描画される文字の一例を示す図。 曲線の曲率が閾値より大きい場合に描画される線の一例を示す図。 曲線の曲率が閾値より大きくない場合に描画される線の一例を示す図。 線種に毛筆が選択された場合に、線を描画する手順の一例を示すフローチャート。

以下、実施の形態について図面を参照して説明する。

図１は、実施形態に係る電子機器の外観を示す斜視図である。電子機器は、例えば、スタイラス（ペン）または指によって手書き文字を入力可能な携帯型電子機器である。電子機器は、タブレットコンピュータ、ノートブック型パーソナルコンピュータ、スマートフォン、ＰＤＡ等として実現され得る。以下では、電子機器がタブレットコンピュータ１０として実現されている場合を想定する。タブレットコンピュータ１０は、タブレットまたはスレートコンピュータとも称される携帯型電子機器であり、図１に示すように、本体１１とタッチスクリーンディスプレイ１７とを備える。タッチスクリーンディスプレイ１７は、本体１１の上面に重ね合わせるように取り付けられている。

本体１１は、薄い箱形の筐体を有している。タッチスクリーンディスプレイ１７には、フラットパネルディスプレイと、フラットパネルディスプレイの画面上に対するスタイラスまたは指による指定位置を検出するように構成されたセンサ（位置検出デバイス）とが組み込まれている。フラットパネルディスプレイは、例えば、液晶表示装置（ＬＣＤ）であってもよい。センサ（位置検出デバイス）としては、例えば、静電容量方式のタッチパネル、電磁誘導方式のデジタイザなどを使用することができ、スタイラスまたは指が接触あるいは近接した位置を検出する。以下では、デジタイザとタッチパネルの２種類のセンサの双方がタッチスクリーンディスプレイ１７に組み込まれている場合を想定する。

デジタイザ及びタッチパネルの各々は、フラットパネルディスプレイの画面を覆うように設けられる。タッチスクリーンディスプレイ１７は、指を使用した画面に対するタッチ操作のみならず、スタイラス１００を使用した画面に対するタッチ操作も検出することができる。スタイラス１００は例えば電磁誘導ペンであってもよい。ユーザは、外部オブジェクト（スタイラス１００又は指）を使用してタッチスクリーンディスプレイ１７上で手書き入力操作が可能である。なお、スタイラス１００の芯先は、タッチスクリーンディスプレイ１７の表面（センサ面）上の単一の接触点に点状に接触する。

図２は、実施形態におけるタブレットコンピュータ１０のシステム構成を示す図である。
タブレットコンピュータ１０は、図２に示されるように、ＣＰＵ１０１、システムコントローラ１０２、メインメモリ１０３、グラフィクスコントローラ１０５、ＢＩＯＳ−ＲＯＭ１０５、記録デバイス１０６、無線通信デバイス１０７、エンベデッドコントローラ（ＥＣ）１０８等を備える。

ＣＰＵ１０１は、タブレットコンピュータ１０内の各種モジュールの動作を制御するプロセッサである。ＣＰＵ１０１は、記録デバイス１０６からメインメモリ１０３にロードされる各種プログラムを実行する。ＣＰＵ１０１により実行されるプログラムには、オペレーティングシステム（ＯＳ）２０１、手書き入力プログラム２０２などの各種アプリケーションプログラムが含まれている。アプリケーションプログラム２０３には、例えば手書き文字認識プログラム、ブラウザプログラム、画像編集プログラム、文書作成プログラムなどが含まれる。

ＣＰＵ１０１は、手書き入力プログラム２０２を実行することにより、スタイラス１００を用いた手書き入力操作に応じてノートデータ（ページデータ（時系列情報））を生成する機能、ノートファイルに含まれるページを編集するページ編集機能の他、ノートファイル（あるいはページ）の作成と編集に関係する各種機能を実現する。

また、ＣＰＵ１０１は、ＢＩＯＳ−ＲＯＭ１０５に格納された基本入出力システム（ＢＩＯＳ）も実行する。ＢＩＯＳは、ハードウェア制御のためのプログラムである。

システムコントローラ１０２は、ＣＰＵ１０１のローカルバスと各種コンポーネントとの間を接続するデバイスである。システムコントローラ１０２には、メインメモリ１０３をアクセス制御するメモリコントローラも内蔵されている。また、システムコントローラ１０２は、シリアルバスなどを介してグラフィクスコントローラ１０４との通信を実行する機能も有している。

グラフィクスコントローラ１０４は、タブレットコンピュータ１０のディスプレイモニタとして使用されるＬＣＤ１７Ａを制御する表示コントローラである。グラフィクスコントローラ１０４によって生成される表示信号はＬＣＤ１７Ａに送られる。ＬＣＤ１７Ａは、表示信号に基づいて画面イメージを表示する。ＬＣＤ１７Ａ上には、位置検出デバイスとして、タッチパネル１７Ｂ及びデジタイザ１７Ｃが配置されている。タッチパネル１７Ｂは、ＬＣＤ１７Ａの画面上で入力を行うための静電容量式のポインティングデバイスである。指が接触される画面上の接触位置及び接触位置の動き等はタッチパネル１７Ｂによって検出される。デジタイザ１７ＣはＬＣＤ１７Ａの画面上で入力を行うための電磁誘導式のポインティングデバイスである。スタイラス１００が接触される画面上の接触位置及び接触位置の動き等はデジタイザ１７Ｃによって検出される。

無線通信デバイス１０７は、無線ＬＡＮまたは３Ｇ移動通信などの無線通信を実行するように構成されたデバイスである。

ＥＣ１０８は、電力管理のためのエンベデッドコントローラを含むワンチップマイクロコンピュータである。ＥＣ１０８は、ユーザによるパワーボタンの操作に応じてタブレットコンピュータ１０を電源オンまたは電源オフする機能を有している。

図３は、手書き入力プログラム２０２の構成を示すブロック図である。

手書き入力プログラム２０２は、ペン種選択処理部３０１、および表示処理部３０２等を備えている。

ペン種選択処理部３０１は、ＬＣＤ１７Ａに表示されているユーザインタフェースを用いて選択されたペン種を検出し、検出されたペン種を表示処理部３０２に通知する。

表示処理部３０２は、デジタイザ１７Ｃによって検出された接触位置の座標に基づいて、通知されたペン種に応じた線を表示する処理を実行する。

表示処理部３０２は、毛筆描画処理部３０２Ａおよびマスク描画処理部３０２Ｂ等を有する。

毛筆描画処理部３０２Ａは、検出された位置に応じて、毛筆で描かれたような線を描画する処理を行う。スタイラス１００の芯先がタッチスクリーンディスプレイ１７の表面（センサ面）上に接触した場合、毛筆描画処理部３０２Ａは、デジタイザ１７Ｃによって検出された接触点の位置とその軌跡に基づいた、毛筆で描かれたような線４０１を描画する処理を行う。

毛筆描画処理部３０２Ａは、図４に示すように、毛筆で描かれたような線４０１を描画するために、芯先の進行方向に対して平行な複数の線を描画する。毛筆描画処理部３０２Ａは、接触点の圧力（筆圧）に応じて複数の線の太さを決定する。毛筆描画処理部３０２Ａは、筆圧が高いほど、各線は太く描画する。各線の太さが隣接する線の間隔の１／２以上になると、隣接する線が重なって描画されるので、１本の線状に描画される。各線の太さが隣接する線の間隔の１／２未満になると、隣接する線の間に隙間ができるので、複数の線が描画され、線がかすれたように描画される。

また、複数の線の内の外側の線ほど筆圧が低くなるに従って、細く描画されるようにしても良い。このように描画することで、スタイラスの芯先がタッチスクリーンディスプレイ１７に接触している間に筆圧が徐々に弱くなっていっても、中央部の線は最後まで描画されるようになる。

ところで、筆圧が低い状態で描画していると、実際の筆と異なり、スタイラス１００の細い芯先のまわりに毛の束１つ１つに対応するそれぞれの描画線が見えてしまい、ユーザは、芯先と描画途中の線との間の見た目に違和感を抱くことがある。

マスク描画処理部３０２Ｂは、図５に示すように、複数の線を描画するレイヤの上のレイヤに複数の線の先端部をマスクするためのマスクオブジェクト４０２を描画する処理を行う。線の先端部の位置が移動するのに従って、オブジェクト４０２の色は、線４０１の色に対応する。例えば、オブジェクト４０２の色と線４０１の色とは同じ色である。

表示処理部３０２は、図６に示すように、線４０１の先端上に、マスクオブジェクト４０２を描画する。マスクオブジェクトの描画位置は、変更される。マスクオブジェクト４０２は、複数の線の内の少なくとも一部の線の上に描画される。マスクオブジェクト４０２の形状は、例えば線４０１の太さよりやや小さい円である。

なお、タッチスクリーンディスプレイ１７の表面上へのスタイラス１００の芯先が検出されなくなった離れた場合、表示処理部３０２は、図７に示すように、線４０１上にマスクオブジェクト４０２を描画しない。言い換えると、タッチスクリーンディスプレイ１７の表面上へのスタイラス１００の芯先が検出されなくなった離れた場合、表示処理部３０２は、マスクオブジェクト４０２の表示を停止する。

線４０１の先端部を隠すためのマスクオブジェクト４０２が線の先端に描画されることで、１本の線が追従する感じになり違和感が少なくなる。先端に描画されるマスクオブジェクト４０２を一時的に表示し、線を書ききった際にマスクオブジェクト４０２をディスプレイに描画しないことで、線のかすれ感や割れなどは問題なく表現できる。

毛筆描画処理部３０２Ａは、タッチスクリーンディスプレイ１７の表面上のスタイラス１００の芯先の接触点の軌跡の形状に応じて、複数の線のうちの第１線と第２線とを、異なる太さの線により表示する。例えば、芯先の軌跡が曲線を描く場合、毛筆描画処理部３０２Ａは、曲線の曲率に応じて各線のそれぞれの太さを決定する。マスク描画処理部３０２Ｂは、複数の線の表示領域の密度（線幅と線が表示されている領域との比）に応じて、前記オブジェクトの大きさおよび表示位置を決定する。

図８，９に示すように、破線によって囲まれた曲線の曲率が大きい場合、曲線の内側の線が細く描画される。図１０に示すように、破線によって囲まれた曲線の曲率が大きくない場合、曲線の外側の線が細く描画される。

この場合、図１１および図１２に示すように、かすれた複数の線のそれぞれをまとめる図形を描画する。なお、かすれたり割れたりした場合、線の表示領域の密度が閾値より高い領域上にマスクオブジェクトを描画する。また、線の表示領域の密度が閾値より高くない領域上にマスクオブジェクトを描画しない。つまり、オブジェクト４０２が表示される位置とオブジェクト４０２の形状とは、複数の線が表示される位置の間隔、または複数の線の密度に応じて定められる。

図１１は、曲線の曲率が閾値より大きい場合に描画される線を示している。図１２は、曲率が閾値より大きくない場合に描画される線を示している。

図１３は、線種に毛筆が選択された場合に、線を描画する手順を示すフローチャートである。
先ず、線種に毛筆が選択され、スタイラス１００の芯先がタッチスクリーンディスプレイ１７の表面（センサ面）上に接触した場合、毛筆描画処理部３０２Ａは、デジタイザ１７Ｃによって検出された接触点の位置とその軌跡に基づいた、毛筆で描かれたような線４０１を描画する処理を行う。また、マスク描画処理部３０２Ｂは、デジタイザ１７Ｃによって検出された位置に応じて、芯先の近傍にマスクオブジェクト４０２を描画する処理を行う（ステップＢ１１）。表示処理部３０２は、線４０１上にマスクオブジェクト４０２を重ねて描画したグラフィクスを描画する。表示処理部３０２によって描画されたグラフィクスがＬＣＤ１７Ａに描画される。

表示処理部３０２は、スタイラス１００の芯先がタッチスクリーンディスプレイ１７の表面に接触しているかを判定する（ステップＢ１２）。接触していると判定した場合（ステップＢ１２のＹｅｓ）、スタイラス１００の芯先の接触位置に応じて線４０１およびマスクオブジェクト４０２が描画される。接触していないと判定した場合（ステップＢ１２のＮｏ）、マスク描画処理部３０２Ｂは、マスクオブジェクト４０２を描画する処理を停止する（ステップＢ１３）。マスクオブジェクト４０２が描画されなくなるので、ＬＣＤ１７Ａに表示されるグラフィクスからマスクオブジェクト４０２が消去される。

なお、タッチスクリーンディスプレイ１７の表面上のスタイラス１００の芯先の接触点の軌跡の形状に応じて、隣接する線の間隔の大きさを変えても良い。例えば、複数の線が、第１線と、第１線と隣接する第２線と、第２線と隣接する第３線とを含む場合、毛筆描画処理部３０２Ａは、第１線と第２線との間隔と、第２線と第３線との間隔とを、異なる大きさにより表示するようにしても良い。

本実施形態によれば、ペン種が毛筆の場合に、線の先端部上にオブジェクトを表示することで、筆記途中の線がスッキリ見えるため、芯先と描画途中の線との間の見た目に違和感をおぼえることを抑制することが可能になる。

また、本実施形態の各種処理はコンピュータプログラムによって実現することができるので、このコンピュータプログラムを格納したコンピュータ読み取り可能な記憶媒体を通じてこのコンピュータプログラムを通常のコンピュータにインストールして実行するだけで、本実施形態と同様の効果を容易に実現することができる。

ここで説明したシステムの様々なモジュールは、ソフトウェアアプリケーション、ハードウェアおよび／またはソフトウェアのモジュール、あるいは、サーバのような１つ以上のコンピュータ上のコンポーネントとして実現することができる。様々なモジュールを別々に示したが、これらは、同一の根本的なロジックまたはコードのいくつかまたはすべてを共有することが可能である。

本発明のいくつかの実施形態を説明したが、これらの実施形態は、例として提示したものであり、発明の範囲を限定することは意図していない。これら新規な実施形態は、その他の様々な形態で実施されることが可能であり、発明の要旨を逸脱しない範囲で、種々の省略、置き換え、変更を行うことができる。これら実施形態やその変形は、発明の範囲や要旨に含まれるとともに、特許請求の範囲に記載された発明とその均等の範囲に含まれる。

１０…タブレットコンピュータ、１７…タッチスクリーンディスプレイ、１７Ａ…ＬＣＤ、１７Ｂ…タッチパネル、１７Ｃ…デジタイザ、１００…スタイラス、１０１…ＣＰＵ、１０３…メインメモリ、２０１…オペレーティングシステム、２０２…手書き入力プログラム、３０１…ペン種選択処理部、３０２…表示処理部、３０２Ａ…毛筆描画処理部、３０２Ｂ…マスク描画処理部。

Claims (15)

1. ディスプレイのセンサ面上への接触に応じた線を描画可能な電子機器であって、
   センサ面上の単一の接触点の位置とその軌跡に基づいた複数の線を表示するとともに、前記複数の線の少なくとも一部の線上であって単一の接触点の位置の近傍の領域に前記複数の線の色に対応する色のオブジェクトを表示する表示処理手段を具備し、
   前記複数の線の太さは、接触点の圧力に応じて異なる電子機器。
2. 前記センサ面上への接触が検出されなくなった場合、前記表示処理手段は、前記オブジェクトの表示を停止する、請求項１に記載の電子機器。
3. 前記オブジェクトが表示される位置と前記オブジェクトの形状は、前記複数の線が表示される位置の間隔、または前記複数の線の密度に応じて定まる、請求項１に記載の電子機器。
4. 前記表示処理手段は、前記センサ面上の単一の接触点の軌跡の形状に応じて、前記複数の線のうちの第１線と第２線とを、異なる太さの線により表示する、請求項１に記載の電子機器。
5. 前記複数の線は、第１線と、前記第１線と隣接する第２線と、前記第２線と隣接する第３線とを含み、
   前記表示処理手段は、前記センサ面上の単一の接触点の軌跡の形状に応じて、前記第１線と前記第２線との間隔と、前記第２線と前記第３線との間隔とを、異なる大きさにより表示する請求項１に記載の電子機器。
6. ディスプレイのセンサ面上への接触に応じた線を描画可能な表示方法であって、
   センサ面上の単一の接触点の位置とその軌跡に基づいた複数の線を表示するとともに、前記複数の線の少なくとも一部の線上であって単一の接触点の位置の近傍の領域に前記複数の線の色に対応する色のオブジェクトを表示する、前記複数の線の太さは、接触点の圧力に応じて異なる
   表示方法。
7. 前記センサ面上への接触が検出されなくなった場合、前記オブジェクトの表示を停止するする、請求項６に記載の表示方法。
8. 前記オブジェクトが表示される位置と前記オブジェクトの形状は、前記複数の線が表示される位置の間隔、または前記複数の線の密度に応じて定まる、請求項６に記載の表示方法。
9. 前記センサ面上の単一の接触点の軌跡の形状に応じて、前記複数の線のうちの第１線と第２線とを、異なる太さの線により表示する、請求項６に記載の表示方法。
10. 前記複数の線は、第１線と、前記第１線と隣接する第２線と、前記第２線と隣接する第３線とを含み、
    前記センサ面上の単一の接触点の軌跡の形状に応じて、前記第１線と前記第２線との間隔と、前記第２線と前記第３線との間隔とを、異なる大きさにより表示する、請求項６に記載の表示方法。
11. ディスプレイのセンサ面上への接触に応じた線を描画可能なプログラムであって、
    センサ面上の単一の接触点の位置とその軌跡に基づいた複数の線を表示するとともに、前記複数の線の少なくとも一部の線上であって単一の接触点の位置の近傍の領域に前記複数の線の色に対応する色のオブジェクトを表示する手順であって、前記複数の線の太さは、接触点の圧力に応じて異なる、手順を
    コンピュータに実行させるプログラム。
12. 前記センサ面上への接触が検出されなくなった場合、前記オブジェクトの表示を停止する、請求項１１に記載のプログラム。
13. 前記オブジェクトが表示される位置と前記オブジェクトの形状は、前記複数の線が表示される位置の間隔、または前記複数の線の密度に応じて定まる、請求項１１に記載のプログラム。
14. 前記センサ面上の単一の接触点の軌跡の形状に応じて、前記複数の線のうちの第１線と第２線とを、異なる太さの線により表示する、請求項１１に記載のプログラム。
15. 前記複数の線は、第１線と、前記第１線と隣接する第２線と、前記第２線と隣接する第３線とを含み、
    前記センサ面上の単一の接触点の軌跡の形状に応じて、前記第１線と前記第２線との間隔と、前記第２線と前記第３線との間隔とを、異なる大きさにより表示する請求項１１に記載のプログラム。

Images