JP6313395B1 - 描画処理方法、描画処理プログラム及び描画処理装置 - Google Patents

Abstract

【課題】効率的かつ的確な描画を支援するための描画処理方法、描画処理プログラム及び描画処理装置を提供する。【解決手段】ユーザ端末１０は、制御部１１とタッチ入力可能なタッチパネルディスプレイ１４とを備える。そして、制御部１１が、描画操作について、線画の選択を検知した場合、線画の描画開始位置を特定し、描画開始位置から離れた位置の操作開始位置からの軌跡に応じて描画された線画のオブジェクトを生成する。また、制御部１１は、描画操作について、図形の選択を検知した場合、図形オブジェクトの配置位置を特定し、配置位置から離れた位置の操作開始位置からの軌跡に応じて、図形オブジェクトの配置を決定する。【選択図】図１

Description

本発明は、コンピュータ端末において、描画を支援するための描画処理方法、描画処理プログラム及び描画処理装置に関する。

タブレット端末等のコンピュータ端末では、タッチパネルディスプレイにおいて各種操作を行なう。このようなタッチパネルディスプレイを用いることにより、直感的な操作が可能となる。そこで、タッチパネル式の表示部を備える携帯端末装置でタッチパネル全面のタッチ操作を実現する技術が開示されている（例えば、特許文献１）。この文献に記載された技術では、端末の傾きの変化を検出し、傾きの方向を判定し、判定した内容に基づき、タッチパネルでの操作を伴う操作子を含んだ画面の表示位置を移動させ、操作子に対する操作を受け付ける。

また、タッチ操作により描画像を生成する技術も検討されている（例えば、特許文献２）。この文献記載のタッチ操作入力装置は、表示画面に対してタッチ操作により入力を可能とするものであり、タッチ操作を検出するタッチ操作検出部と、タッチ操作検出部の検出結果により操作内容を判定して処理を行なう操作処理部とを備える。操作処理の判定結果により、メニューの表示処理とメニュー項目の処理や、描画モードの場合、タッチ部分に描画像を生成する処理を実行する。そして、タッチ操作をメニュー処理の操作と判定した場合、画像処理部は、描画モードであっても、タッチ操作による描画像を消去する。

特開２０１４−１４９６５３号公報 特開２０１５−２０７０４０号公報

しかしながら、タッチパネルディスプレイにおいて、指等によるタッチ操作を行なう場合、的確な操作が困難なことがある。例えば、指先の大きさに対して、タッチパネルディスプレイが比較的小さく、表示領域も小さい場合、タッチパネルディスプレイ上の表示が指に隠れ、的確な操作が難しい。タッチパネルディスプレイに表示された画像を拡大して操作することも可能であるが、画像の拡大には手間がかかり、効率的な操作を実現することができない。

本発明は、上記問題点を解決するためになされたものであり、効率的かつ的確な描画を支援するための描画処理方法、描画処理プログラム及び描画処理装置を提供することにある。

・上記課題を解決する描画処理方法は、制御部と入力操作が可能な表示部とを備えた描画処理装置を制御する。前記制御部が、描画操作について、前記表示部での入力位置に応じて線画の描画開始位置を特定し、前記描画開始位置が特定された後に入力された任意の操作開始位置からの軌跡に応じて前記描画開始位置から描画された線画のオブジェクトを生成する。これにより、描画領域とは異なる位置における操作により描画が行なうことができる。従って、タッチ操作時において指等により描画領域が隠れることなく、的確かつ効率的な描画を行なうことができる。

・上記描画処理方法においては、前記制御部が、描画操作について、オブジェクトの選択を検知した場合、オブジェクトの配置位置を特定し、前記配置位置から離れた位置の操作開始位置からの軌跡に応じて、前記オブジェクトの配置を決定することが好ましい。これにより、図形が配置された領域とは離れた領域で、図形の配置を確認しながら図形を設定することができる。

・上記描画処理方法においては、描画操作について、オブジェクトの部分消去指示を検知した場合、消去開始位置を特定し、前記表示部の入力位置に応じた任意の操作開始位置からの軌跡に応じて前記消去開始位置から前記オブジェクトの部分消去を行なうことが好ましい。これにより、消去領域から離れた領域で、効率的かつ的確に消去操作を行なうことができる。

・上記描画処理方法においては、前記オブジェクトの配置に対して、複数の操作エリアが設定されており、各操作エリアの選択に応じて、前記オブジェクトに対して異なる操作を実行することが好ましい。これにより、効率的にオブジェクトに対する操作を行なうことができる。

・上記描画処理方法においては、前記オブジェクト内の基準位置に対して、操作開始位置からの軌跡の広がり角度を算出し、前記広がり角度に基づいて、前記オブジェクトの回転操作を実行することが好ましい。これにより、オブジェクトから離れた領域で、オブジェクトの回転を操作することができる。

・上記描画処理方法においては、前記表示部において操作された操作位置のオブジェクトの属性を特定し、属性表示領域に表示し、操作オフの検知時に、前記属性を描画時の属性として設定することが好ましい。これにより、タッチ位置とは異なる領域で属性を確認することができる。

・上記描画処理方法においては、前記操作位置の周囲に属性候補を出力し、操作オフの方向に応じて、前記属性候補の中から描画時に用いる属性を決定することが好ましい。これにより、効率的に属性を決定することができる。

・上記描画処理方法においては、始点と終点とが設定されたオブジェクトが選択された場合、前記表示部の操作位置に前記始点を設定し、スライド操作された操作位置に前記終点を設定して、前記オブジェクトを前記表示部に出力し、操作オフ時に前記オブジェクトの形状を決定することが好ましい。これにより、スライド操作によりオブジェクトの大きさを確認しながら、効率的に形状や配置を決定することができる。

本発明によれば、コンピュータ端末において、効率的かつ的確な描画を支援することができる。

第１の実施形態の描画処理装置の機能ブロックの説明図。 描画処理装置のハードウェア構成例の説明図。 第１の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第１の実施形態における処理手順の説明図。 第１の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第１の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第２の実施形態における操作エリアの説明図。 第２の実施形態における処理手順の説明図。 第２の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第２の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第２の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第２の実施形態におけるタッチパネルディスプレイの表示画面の説明図。 第３の実施形態における処理手順の説明図。 第４の実施形態における処理手順の説明図。 第５の実施形態における処理手順の説明図。

（第１の実施形態）
以下、図１〜図６に従って、本発明を具体化した描画処理装置の第１の実施形態を説明する。本実施形態では、ユーザ端末１０に表示された画面において描画を行なう場合を説明する。

ユーザ端末１０は、利用者が用いるコンピュータ端末（描画処理装置）であって、各種アプリケーションを実行させることにより、情報の出力や入力に用いられる。
図１に示すように、本実施形態では、このユーザ端末１０は、制御部１１、メモリ１２、通信部１３、タッチパネルディスプレイ１４を備えている。

制御部１１は、後述する処理（表示制御段階、タッチ制御段階、アプリケーション実行段階、描画処理段階、ＳＮＳ処理段階等の各処理等）を行なう。そして、制御部１１は、図１に示すように、表示制御部１１１、タッチ制御部１１２、アプリケーション実行部１１３として機能するとともに、アプリケーションプログラムを実行することにより、描画処理部１１４、ＳＮＳ処理部１１５として機能する。

表示制御部１１１は、タッチパネルディスプレイ１４における表示を制御する処理を実行する。具体的には、タッチパネルディスプレイ１４に出力された表示画面の階層（表示レイヤ）を制御する。本実施形態では、描画を行なう描画レイヤと、この描画レイヤと位置を同期され、カーソルや図形の枠線を表示する操作レイヤとを含む。

タッチ制御部１１２は、タッチパネルディスプレイ１４におけるタッチを検知する処理を実行する。
アプリケーション実行部１１３は、ユーザ端末１０に格納されたアプリケーション（例えば、情報共有、ソーシャルネットワークサービス等）のアプリケーション起動、実行等の管理を行なう。

描画処理部１１４は、タッチパネルディスプレイ１４における線画や図形の描画を制御する処理を実行する。描画処理部１１４は、上述した描画レイヤにおいて画面を出力する。本実施形態では、描画レイヤには、ＨＴＭＬ５のcanvas要素の「Canvas API」を利用し、操作レイヤには、ＨＴＭＬのＤＯＭ（Document Object Model）を利用する。これにより、描画レイヤにおける処理負担を軽減することができる。そして、操作レイヤでのカーソルの位置情報の更新は、高い頻度で行なうが、描画レイヤでの図形の更新は、新しいオブジェクトが追加されたとき等、頻度を低くして、処理負荷を軽減する。
ＳＮＳ処理部１１５は、ソーシャルネットワークサービス（ＳＮＳ）を利用する処理を実行する。ここでは、ユーザ端末１０（描画処理装置）と、通信可能なサーバ装置（図示せず）が生成したデータに基づいて、ユーザ端末１０のタッチパネルディスプレイ１４に画面を表示させるウェブ表示を行なう。

メモリ１２には、タッチパネルディスプレイ１４において描画に用いる情報を記録する。例えば、タッチパネルディスプレイ１４において検知したスライド軌跡や、このスライド軌跡により生成された図形（オブジェクト）を仮記憶する。例えば、操作レイヤでのカーソルの位置情報を更新したり、描画の一時保存が指示された場合や、描画処理プログラムが停止した場合には、描画レイヤで生成されたオブジェクトを更新したりする。

通信部１３は、ネットワークを介して、サーバ装置や他のユーザ端末と通信を行なう。
タッチパネルディスプレイ１４は、表示手段及び入力手段として機能する。具体的には、パネル上に情報を出力するとともに、パネル表面に触れる（タッチする）ことにより、タッチされた画面位置の情報を感知して各種操作（例えば、タップ、スライド、スワイプ、フリック等）を行なうことができる。

（ハードウェア構成例）
図２は、ユーザ端末１０のハードウェア構成例である。
ユーザ端末１０は、通信インターフェースＨ１１、入力装置Ｈ１２、表示装置Ｈ１３、記憶部Ｈ１４、プロセッサＨ１５を有する。なお、このハードウェア構成は一例であり、他のハードウェアを有していてもよい。

通信インターフェースＨ１１は、他の装置との間で通信経路を確立して、データの送受信を実行するインターフェースであり、通信部１３を実現する。例えばネットワークインターフェースカードや無線インターフェース等である。

入力装置Ｈ１２は、ユーザ等からの入力を受け付ける装置である。表示装置Ｈ１３は、各種情報を表示するディスプレイ等である。本実施形態では、入力装置Ｈ１２、表示装置Ｈ１３として、タッチパネルディスプレイ１４を用いる。

記憶部Ｈ１４は、ユーザ端末１０の各種機能を実行するためのデータや各種プログラムを格納する記憶装置であり、メモリ１２を実現する。記憶部Ｈ１４の一例としては、ＲＯＭ、ＲＡＭ、ハードディスク等がある。

プロセッサＨ１５は、記憶部Ｈ１４に記憶されるプログラムやデータを用いて、ユーザ端末１０における各処理を制御する制御部１１を実現する。プロセッサＨ１５の一例としては、例えばＣＰＵやＭＰＵ等がある。このプロセッサＨ１５は、ＲＯＭ等に記憶されるプログラムをＲＡＭに展開して、各種処理に対応する各種プロセスを実行する。

（ユーザ端末１０における動作）
次に、図３〜図６を用いて、このユーザ端末１０における動作を説明する。所定のアプリケーションにおいて、ユーザが描画を行なう場合には、ユーザ端末１０のタッチパネルディスプレイ１４を用いて、描画機能を指示する。

この場合、図３に示すように、制御部１１のアプリケーション実行部１１３は、描画処理部１１４、ＳＮＳ処理部１１５を起動し、タッチパネルディスプレイ１４に表示画面２００を出力する。この表示画面２００には、ツールメニュー２１０、描画エリア２２０が表示される。

ツールメニュー２１０には、描画ボタン２１１、消しゴムボタン２１２、図形ボタン２１３、テキストボタン２１４、カメラボタン２１５、アシストボタン２１６等が表示される。

描画ボタン２１１は、描画エリア２２０での線画の描画に用いる線種（描画ツール）を選択するためのツール画面を表示する場合に用いる。
消しゴムボタン２１２は、描画エリア２２０に表示された線画や図形を部分的に消去するための消しゴムツールを表示する場合に用いる。

図形ボタン２１３は、描画エリア２２０に、予め準備された図形（例えば、正方形、円形、矢印、ハート型等）を配置するための図形ツールを表示する場合に用いる。
テキストボタン２１４は、描画エリア２２０に、テキスト入力を行なうためのソフトウェアキーボードを表示する場合に用いる。

カメラボタン２１５は、描画エリア２２０に、カメラにより撮影された画像等を表示する場合に用いる。
アシストボタン２１６は、描画エリア２２０における描画を支援するための機能を実行するためのボタンである。このアシストボタン２１６を選択することにより、各種アシスト機能の一覧がプルダウンされる。本実施形態では、アシスト機能には、「ポインターモード」、「拡大・縮小モード」、「一時保存」、「一時保存呼び出し」、「ヘルプ」等の機能が含まれる。

「ポインターモード」は、後述するように、描画位置に対して離れた操作位置での描画を支援する機能である。
「拡大・縮小モード」は、描画エリア２２０の拡大、縮小を行なう機能である。
「一時保存」は、描画エリア２２０における描画内容をメモリ１２に一時的に保存する機能であり、「一時保存呼び出し」は、メモリに一時的に保存された描画内容を描画エリア２２０に呼び出す機能である。
「ヘルプ」は、ツールメニュー２１０に表示された各ボタン等の説明を、吹き出しアイコンにより出力する機能である。

（ポインターモード処理）
以下、図４を用いて、アシストボタン２１６を用いて「ポインターモード」を指定した場合のポインターモード処理を説明する。このポインターモード処理においては、例えば、描画ツールを用いて線画を描く場合、描画を行なう領域とは離れた位置におけるスライド操作により、線画を描くことができる。

まず、ユーザ端末１０の制御部１１は、描画ツールの指定処理を実行する（ステップＳ１−１）。具体的には、ツールメニュー２１０において、描画ボタン２１１を選択する。この場合、制御部１１の描画処理部１１４は、タッチパネルディスプレイ１４にツール画面を出力する。このツール画面においては、線画を描くための線種（配色、太さ、透明度、縁つき等）の選択画面が含まれる。

次に、ユーザ端末１０の制御部１１は、描画開始位置の設定処理を実行する（ステップＳ１−２）。具体的には、線画を描く場合、描画エリア２２０において、線画の描画開始位置を、タッチパネルディスプレイ１４上をタッチしてすぐに離す「タップ」を行なう。この場合、制御部１１のタッチ制御部１１２は、描画エリア２２０においてタップ位置（座標）を特定する。そして、描画処理部１１４は、タップ位置に線画を描くためのポインタ（カーソル）を配置する。

図３に示すように、描画エリア２２０において、タップを検知した場合、描画処理部１１４は、ポインタ２３０を表示する。後述するように、このポインタ２３０は、ペンとして機能し、ポインタ２３０を移動させることにより線画を描くことができる。

次に、ユーザ端末１０の制御部１１は、操作開始位置の設定処理を実行する（ステップＳ１−３）。具体的には、配置されたポインタを用いて、線画を描く場合、描画エリア２２０において、再度、任意の位置をタッチする。ここでは、描画開始位置と異なる位置をタッチすることができる。この場合、制御部１１の描画処理部１１４は、再度タッチされた位置を操作開始位置として設定する。
ここで、描画エリア２２０の座標を（ｘ，ｙ）で表現した場合、操作開始位置の座標（ｘ２，ｙ２）から描画開始位置の座標（ｘ１，ｙ１）への補正ベクトル（ｘ３，ｙ３）〔＝（ｘ１−ｘ２，ｙ１−ｙ２）〕を算出する。

次に、ユーザ端末１０の制御部１１は、タッチオフかどうかについての判定処理を実行する（ステップＳ１−４）。具体的には、線画を描く場合には、操作レイヤにおいて、タッチを継続しながら、タッチ位置を移動させるスライドを行なう。制御部１１のタッチ制御部１１２は、タッチ位置のスライドを検知しながら、タッチパネルディスプレイ１４からのタッチの離脱（タッチオフ）を待機する。
この場合、新たなスライド位置の座標（ｘｉ，ｙｉ）について、補正ベクトル（ｘ３，ｙ３）を用いて、ポインタ位置（ｘｉ＋ｘ３，ｙｉ＋ｙ３）を算出して、このポインタ位置で描画を行なう。

タッチオフでないと判定した場合（ステップＳ１−４において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、スライド軌跡に応じた描画処理を実行する（ステップＳ１−５）。具体的には、制御部１１のタッチ制御部１１２は、操作開始位置を始点とするスライド軌跡と同様に、ポインタを移動させる。この場合、タッチ位置（座標）と描画を行なうポインタ位置（座標）は、操作開始位置（座標）と描画開始位置（座標）との相対位置関係を保持する。その結果、描画処理部１１４は、描画開始位置から、スライド軌跡と同じ線画を描画エリア２２０に表示する。

図５に示すように、スライド軌跡２４０と同様に、ポインタ２３０が移動することにより、スライド軌跡２４０とは離れた位置に線画２４１が生成される。
一方、タッチオフと判定した場合（ステップＳ１−４において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、オブジェクト設定処理を実行する（ステップＳ１−６）。具体的には、制御部１１の描画処理部１１４は、描画を終了し、ポインタにより描かれた線画２４１を、表示レイヤにオブジェクトとして書き込む。

完成した線画２４１に対して、新たな線画を生成する場合には、再度、描画開始位置の設定処理（ステップＳ１−２）から繰り返す。
例えば、図６に示すように、最初の線画２４１に接続した新たな線画を描く場合には、接続位置をタップすることにより、描画開始位置２４２を設定する。そして、再度、描画エリア２２０のいずれかの場所をタッチし、この操作開始位置を始点とするスライド軌跡２４３で指をスライドさせる。この場合、新たな線画２４４が生成される。
そして、ＳＮＳ処理部１１５は、この線画２４４のオブジェクトを含む画像を用いて、ソーシャルネットワークサービスを利用する。

以上、本実施形態によれば、以下に示す効果を得ることができる。
（１）上記実施形態では、ユーザ端末１０の制御部１１は、描画開始位置の設定処理（ステップＳ１−２）、操作開始位置の設定処理（ステップＳ１−３）、スライド軌跡に応じた描画処理（ステップＳ１−５）を実行する。これにより、描画領域とは異なる位置でのタッチ操作により、描画を行なうことができる。従って、タッチ操作時において指により描画領域が隠れることなく、的確かつ効率的な描画を行なうことができる。更に、操作開始位置を任意に設定することができるので、ユーザにとって都合がよい領域で、スライド操作を行なうことができる。

（第２の実施形態）
次に、図７〜図１２を用いて、第２の実施形態を説明する。第１の実施形態においては、線画を作成する場合を説明した。第２の実施形態は、第１の実施形態において、図形を作成する構成であり、同様の部分については詳細な説明を省略する。

図形を用いて描画を行なう場合、図３のツールメニュー２１０において、図形ボタン２１３を選択する。この場合、制御部１１の描画処理部１１４は、ツール画面を出力する。このツール画面においては、描画に用いる図形（例えば、正方形、円形、矢印、ハート型等）や、図形属性（配色、太さ、透明度、縁つき等）の選択画面が含まれる。そして、ツール画面において「配置」ボタンが選択された場合、描画処理部１１４は、選択された図形（ここでは、ハート型）のオブジェクトを、描画エリア２２０に表示する。そして、図形のオブジェクトの変形や回転、配置の変更を行なう。

図７に示すように、図形のオブジェクト３００の内部や周囲には、複数の操作エリアを設定する。本実施形態では、オブジェクト３００の内部及び周辺に９個の操作エリアが設定される。オブジェクト３００を包含する矩形の各頂点３０１〜３０４及び頂点間の線分のスライド操作（移動）により、オブジェクト３００の変形操作を行なう。更に、オブジェクト３００内部のスライド操作（移動）により、オブジェクト３００全体の移動操作を行なう。

このために、頂点３０１〜３０４の周囲には、それぞれ変形操作エリア３１１〜３１４が設けられている。変形操作エリア３１１〜３１４の大きさは、例えば、矩形の短辺の所定割合や所定長さの辺からなる正方形を用いる。変形操作エリア３１１をタッチしてスライド操作が行なわれた場合には、頂点３０１の配置を変更する。変形操作エリア３１２をタッチしてスライド操作が行なわれた場合には、頂点３０２の配置を変更する。変形操作エリア３１３をタッチしてスライド操作が行なわれた場合には、頂点３０３の配置を変更する。変形操作エリア３１４をタッチしてスライド操作が行なわれた場合には、頂点３０４の配置を変更する。

また、頂点３０１〜３０４間の各辺に対応して、変形操作エリア３２１〜３２４が設けられている。変形操作エリア３２１は右辺を左右に移動する操作が行なわれた場合、右辺を位置を変更してオブジェクト３００を変形する。変形操作エリア３２２は左辺を左右に移動する操作が行なわれた場合、左辺を位置を変更してオブジェクト３００を変形する。変形操作エリア３２３は上辺を上下に移動する操作が行なわれた場合、上辺を位置を変更してオブジェクト３００を変形する。変形操作エリア３２４は下辺を上下に移動する操作が行なわれた場合、下辺を位置を変更してオブジェクト３００を変形する。

更に、オブジェクト３００の内部には、変形操作エリア３１１〜３１４，３２１〜３２４に囲まれた移動操作エリア３３０を設ける。この移動操作エリア３３０がタッチされてスライド操作を検知した場合、オブジェクト３００の形状を維持しながらスライド方向に、オブジェクト３００全体を移動させる。

更に、変形操作エリア３１１〜３１４，３２１〜３２４の外側領域においても、オブジェクト３００に対する操作を行なう操作エリアを設ける。各操作エリア以外の外側領域においてスライドを検知した場合、オブジェクト３００の中心（オブジェクト内の基準位置）を軸としてオブジェクト３００全体を回転させる。なお、オブジェクト内の基準位置は、予め定められた位置であれば、オブジェクトの中心に限定されるものではない。

（図形操作処理）
図８を用いて、各操作エリアを用いての図形操作を説明する。
まず、ユーザ端末１０の制御部１１は、オブジェクト選択処理を実行する（ステップＳ２−１）。具体的には、ツールメニュー２１０において、図形ボタン２１３を選択する。この場合、制御部１１の描画処理部１１４は、タッチパネルディスプレイ１４にツール画面を出力する。このツール画面を用いて、描画に用いる図形や図形属性を選択する。

次に、ユーザ端末１０の制御部１１は、オブジェクト配置処理を実行する（ステップＳ２−２）。具体的には、ツール画面において配置ボタンを選択する。この場合、制御部１１の描画処理部１１４は、描画エリア２２０に、選択された図形のオブジェクト３００を配置する。

次に、ユーザ端末１０の制御部１１は、タッチ位置の特定処理を実行する（ステップＳ２−３）。具体的には、制御部１１のタッチ制御部１１２は、描画エリア２２０において、オブジェクト３００に対して、タッチ位置の座標を特定する。

次に、ユーザ端末１０の制御部１１は、オブジェクト周辺内かどうかについての判定処理を実行する（ステップＳ２−４）。具体的には、制御部１１の描画処理部１１４は、タッチ位置と、オブジェクト３００に対して設定された操作エリアとの位置関係を特定する。タッチ位置が、変形操作エリア３１１〜３１４，３２１〜３２４、移動操作エリア３３０に含まれる場合には、オブジェクト周辺内と判定する。

オブジェクト周辺内に含まれないと判定した場合（ステップＳ２−４において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、スライド軌跡の回転角の算出処理を実行する（ステップＳ２−５）。具体的には、オブジェクトを回転させる場合、変形操作エリア３１１〜３１４，３２１〜３２４、移動操作エリア３３０の外側において、タッチ位置（スライド開始位置）からスライド操作を行なう。この場合、制御部１１のタッチ制御部１１２は、図形のオブジェクトの中心に対して、スライド開始位置から現在のタッチ位置までの広がり角度（回転角）を算出する。

次に、ユーザ端末１０の制御部１１は、回転角に応じてオブジェクトの回転処理を実行する（ステップＳ２−６）。具体的には、制御部１１の描画処理部１１４は、この回転角に応じて、オブジェクト３００を回転させる。そして、スライド操作のタッチオフ時に、オブジェクト３００の配置を設定する。

図９に示すように、オブジェクト３００の中心から、最初に検知したタッチ位置（スライド開始位置）から現在のタッチ位置までのスライド軌跡４００の広がり角度（回転角）を算出する。そして、この回転角を用いて、オブジェクト３００を回転させる。そして、描画処理部１１４は、スライド操作のタッチオフ時に、オブジェクト３００の配置を決定し、ＳＮＳ処理部１１５は、このオブジェクトを含む画像を用いて、ソーシャルネットワークサービスを利用する。

一方、オブジェクト周辺内に含まれると判定した場合（ステップＳ２−４において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、移動操作かどうかについての判定処理を実行する（ステップＳ２−７）。具体的には、制御部１１のタッチ制御部１１２は、タッチ位置が、移動操作エリア３３０に含まれる場合には、移動操作と判定する。

移動操作と判定した場合（ステップＳ２−７において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、スライド軌跡に応じてオブジェクトの移動処理を実行する（ステップＳ２−８）。具体的には、制御部１１の描画処理部１１４は、スライド軌跡に応じて、オブジェクト３００を移動する。そして、描画処理部１１４は、スライド操作のタッチオフ時に、オブジェクト３００の配置を決定し、ＳＮＳ処理部１１５は、このオブジェクトを含む画像を用いて、ソーシャルネットワークサービスを利用する。

図１０に示すように、移動操作と判定した場合、スライド軌跡４１０に応じて、オブジェクト３００を移動する。
一方、タッチ位置が、変形操作エリア３１１〜３１４，３２１〜３２４に含まれる場合には、変形操作と判定する。変形操作と判定した場合（ステップＳ２−７において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、スライド軌跡に応じてオブジェクトの変形処理を実行する（ステップＳ２−９）。具体的には、制御部１１の描画処理部１１４は、変形操作エリア３１１〜３１４，３２１〜３２４に応じて、オブジェクト３００を変形する。そして、描画処理部１１４は、スライド操作のタッチオフ時に、オブジェクト３００の形状を決定し、ＳＮＳ処理部１１５は、このオブジェクトを含む画像を用いて、ソーシャルネットワークサービスを利用する。

図１１に示すように、変形操作エリア３２１のタッチを検知した場合、オブジェクト３００の右辺を左右に移動させて、オブジェクト３００を変形したオブジェクト４２０を生成する。
また、図１２に示すように、変形操作エリア３１２のタッチを検知した場合、オブジェクト３００の頂点３０２を移動させて、オブジェクト３００を変形したオブジェクト４３０を生成する。

以上、本実施形態によれば、以下に示す効果を得ることができる。
（２）上記実施形態では、オブジェクト３００に対して、変形操作エリア３１１〜３１４，３２１〜３２４を設ける。タッチ操作により、図形を変形する場合、頂点や線分のような狭い領域を、指により的確に選択することができない場合がある。これに対して、頂点や線分の周囲に配置された操作エリアにより、効率的かつ的確に変形を行なうことができる。

（３）上記実施形態では、変形操作エリア３１１〜３１４，３２１〜３２４の外側領域においても、オブジェクト３００に対する操作を行なう操作エリアを設ける。オブジェクト周辺内に含まれないと判定した場合（ステップＳ２−４において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、スライド軌跡の回転角の算出処理（ステップＳ２−５）、回転角に応じてオブジェクトの回転処理（ステップＳ２−６）を実行する。これにより、オブジェクトから離れた位置でのスライド操作により、オブジェクトの状況を確認しながら、配置を変更することができる。

（第３の実施形態）
次に、図１３を用いて、第３の実施形態を説明する。第１の実施形態においては、線画を作成する場合、第２の実施形態においては、図形を作成する場合を説明した。この場合、ツール画面において、例えばカラーパレット等を用いて配色を決定する。第３の実施形態は、描画エリアに表示されたオブジェクトの属性（ここでは配色）を用いて、線画や図形の配色を決定する構成であり、同様の部分については詳細な説明を省略する。

（配色決定処理）
図１３を用いて、配色決定処理を説明する。
まず、ユーザ端末１０の制御部１１は、長押し検知処理を実行する（ステップＳ３−１）。具体的には、画面上に表示されている任意の色の箇所から色を吸い取り、配色を決定するスポイト機能を起動させる場合には、描画エリア２２０上で、タッチを継続する長押し操作を行なう。この場合、制御部１１のタッチ制御部１１２は、同じ位置でのタッチ継続時間を計測し、長押し基準時間を経過した場合には、長押し操作と判定する。

次に、ユーザ端末１０の制御部１１は、ポインタ位置の色抽出処理を実行する（ステップＳ３−２）。具体的には、制御部１１の描画処理部１１４は、長押し操作が行なわれた位置にポインタを配置する。そして、描画処理部１１４は、ポインタが配置された位置の配色を抽出する。更に、描画処理部１１４は、ツール画面の配色の選択画面（属性表示領域）に、描画エリアから抽出した配色を表示する。ここで、タッチパネルディスプレイ１４にタッチした状態でポインタ位置（タッチ位置）スライド操作を行なった場合、描画処理部１１４は、ポインタ位置の色抽出処理（ステップＳ３−２）を継続する。

次に、ユーザ端末１０の制御部１１は、タッチオフかどうかについての判定処理を実行する（ステップＳ３−３）。具体的には、制御部１１のタッチ制御部１１２は、タッチパネルディスプレイ１４におけるタッチ位置のスライドに追従しながら、タッチの離脱（タッチオフ）を待機する。

タッチオフでないと判定した場合（ステップＳ３−３において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、ポインタ位置の色抽出処理（ステップＳ３−２）を継続する。
タッチオフと判定した場合（ステップＳ３−３において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、配色の設定処理を実行する（ステップＳ３−４）。具体的には、制御部１１の描画処理部１１４は、タッチオフ時のポインタ位置の配色をツール画面に設定する。これにより、この配色を用いての線画や図形の配置を行なうことができる。

以上、本実施形態によれば、以下に示す効果を得ることができる。
（４）上記実施形態では、ユーザ端末１０の制御部１１は、長押し検知処理（ステップＳ３−１）、ポインタ位置の色抽出処理（ステップＳ３−２）を実行する。タッチオフと判定した場合（ステップＳ３−３において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、配色の設定処理を実行する（ステップＳ３−４）。これにより、タッチ位置とは異なるツール画面において、配色を確認しながら、所望の配色を選択することができる。

（第４の実施形態）
次に、図１４を用いて、第４の実施形態を説明する。第３の実施形態においては、ポインタ位置の配色を抽出して、描画に利用する場合を説明した。第４の実施形態は、配色候補を出力する構成であり、同様の部分については詳細な説明を省略する。この場合、描画処理部１１４は、使用された配色の操作履歴やユーザによって指定された配色を、配色候補として記憶する。

（配色決定処理）
図１４を用いて、配色決定処理を説明する。
まず、ユーザ端末１０の制御部１１は、ステップＳ３−１と同様に、長押し検知処理を実行する（ステップＳ４−１）。

この場合、更に、ユーザ端末１０の制御部１１は、配色候補の出力処理を実行する。具体的には、制御部１１の描画処理部１１４は、ポインタの周囲に配色候補を出力する。例えば、ポインタの上下左右の十字方向に、異なる配色の候補を出力する。配色候補としては、記憶した使用履歴やユーザ指定の配色を用いることができる。なお、配色候補の出力位置は、長押し操作位置の周囲であれば、十字方向に限定されるものではない。

次に、ユーザ端末１０の制御部１１は、フリックかどうかについての判定処理を実行する（ステップＳ４−２）。具体的には、制御部１１のタッチ制御部１１２は、タッチした指を素早く動かしたり弾いたりする操作を検知した場合、フリック操作と判定する。

フリックと判定した場合（ステップＳ４−２において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、フリック方向に応じて配色の特定処理を実行する（ステップＳ４−３）。具体的には、制御部１１の描画処理部１１４は、フリック方向に設定された配色候補を、描画に用いる配色として特定する。

一方、フリックでないと判定した場合（ステップＳ４−２において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、ステップＳ３−２〜Ｓ３−４と同様に、ポインタ位置の色抽出処理（ステップＳ４−４）、タッチオフかどうかについての判定処理（ステップＳ４−５）、配色の設定処理（ステップＳ４−６）を実行する。

以上、本実施形態によれば、上記（４）の効果に加えて、以下に示す効果を得ることができる。
（５）上記実施形態では、ユーザ端末１０の制御部１１は、配色候補の出力処理を実行する。そして、フリックと判定した場合（ステップＳ４−２において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、フリック方向に応じて配色の特定処理を実行する（ステップＳ４−３）。これにより、配色候補により、効率的に配色を選択することができる。

（第５の実施形態）
次に、図１５を用いて、第５の実施形態を説明する。第２の実施形態においては、図形オブジェクトを配置して、移動や変形を行なう場合を説明した。第５の実施形態は、図形オブジェクトの配置時に変形する構成であり、同様の部分については詳細な説明を省略する。この場合、描画に用いることができる図形オブジェクトには、始点と終点とを設定しておく。

（図形生成処理）
図１５を用いて、図形生成処理を説明する。
まず、ユーザ端末１０の制御部１１は、ステップＳ２−１と同様に、オブジェクト選択処理を実行する（ステップＳ５−１）。

次に、ユーザ端末１０の制御部１１は、最初のタップ位置に始点設定処理を実行する（ステップＳ５−２）。具体的には、選択したオブジェクトの描画を行なう場合、描画エリア２２０において、オブジェクトの描画開始位置をタップする。この場合、制御部１１のタッチ制御部１１２は、描画エリア２２０において、タッチされたタップ位置（座標）を特定する。そして、描画処理部１１４は、このタップ位置に、オブジェクトの描画開始位置（始点）を設定する。

次に、ユーザ端末１０の制御部１１は、２回目のタッチの検知処理を実行する（ステップＳ５−３）。具体的には、オブジェクトの終点位置を決定する場合には、再度、描画エリア２２０をタッチする。この場合、制御部１１のタッチ制御部１１２は、描画エリア２２０において、タッチ位置（座標）を特定する。

次に、ユーザ端末１０の制御部１１は、タッチ位置に終点設定処理を実行する（ステップＳ５−４）。具体的には、制御部１１の描画処理部１１４は、このタッチ位置に、オブジェクトの描画終点位置を設定する。

次に、ユーザ端末１０の制御部１１は、始点、終点でオブジェクトの変形処理を実行する（ステップＳ５−５）。具体的には、制御部１１の描画処理部１１４は、描画開始位置、描画終点位置に、オブジェクトの始点、終点を設定し、描画エリア２２０にオブジェクトを表示する。

次に、ユーザ端末１０の制御部１１は、タッチオフかどうかについての判定処理を実行する（ステップＳ５−６）。具体的には、オブジェクトを変形させる場合、タッチ位置をスライドさせる。この場合、制御部１１の描画処理部１１４は、スライド操作に応じて、オブジェクトの終点を追従させて、図形を変形する。そして、描画処理部１１４は、タッチパネルディスプレイ１４からタッチの離脱（タッチオフ）を待機する。

タッチオフでないと判定した場合（ステップＳ５−６において「ＮＯ」の場合）、ユーザ端末１０の制御部１１は、始点、終点でオブジェクトの変形処理（ステップＳ５−５）を継続する。

一方、タッチオフと判定した場合（ステップＳ１−４において「ＹＥＳ」の場合）、ユーザ端末１０の制御部１１は、オブジェクトの設定処理を実行する（ステップＳ５−７）。具体的には、制御部１１の描画処理部１１４は、タッチオフ位置を終点とするオブジェクトを生成し、ＳＮＳ処理部１１５は、このオブジェクトを含む画像を用いて、ソーシャルネットワークサービスを利用する。

以上、本実施形態によれば、以下に示す効果を得ることができる。
（６）上記実施形態では、ユーザ端末１０の制御部１１は、最初のタップ位置に始点設定処理（ステップＳ５−２）、タッチ位置に終点設定処理（ステップＳ５−４）、始点、終点でオブジェクトの変形処理（ステップＳ５−５）を実行する。これにより、始点及び終点の設定やスライド操作によって、オブジェクトの形状や配置を決定することができる。

なお、上記実施形態は、以下の態様に変更してもよい。
・上記第１の実施形態では、ユーザ端末１０の制御部１１は、描画ツールの指定処理を実行する（ステップＳ１−１）。ここでは、ツールメニュー２１０において、描画ボタン２１１を選択する。これに代えて、消しゴムボタン２１２が選択された場合に、ポインターモード処理を実行するようにしてもよい。この場合には、描画処理部１１４は、ツール画面で消しゴムツールの大きさを指定する。そして、背景色による線画を描くことにより、図形の一部を消去する。この場合も、ユーザ端末１０の制御部１１は、描画開始位置の設定処理（ステップＳ１−２）において消去開始位置を設定し、操作開始位置の設定処理（ステップＳ１−３）、スライド軌跡に応じた描画処理（ステップＳ１−５）により、軌跡に応じた消去を行なう。

・上記第１の実施形態では、操作開始位置の座標から描画開始位置の座標への補正ベクトル（ｘ３，ｙ３）を算出する。ここで、補正ベクトルの決定方法は、これに限定されるものではない。例えば、予め定めた初期設定の補正ベクトル（ｘ４，ｙ４）を用いてもよい。この場合、操作開始位置に対して、初期設定の補正ベクトルを用いて描画開始位置を決定する。すなわち、操作開始位置の設定処理（ステップＳ１−３）に応じて、描画開始位置の設定処理（ステップＳ１−２）を実行する。なお、初期設定の補正ベクトルの要素は、同じ値（ｘ４＝ｙ４）に設定したり、異なる値（ｘ４≠ｙ４）に設定したりしてもよい。
また、補正ベクトルを、ユーザの入力や、操作環境に応じて変更するようにしてもよい。具体的には、制御部１１が、ユーザのタッチ位置の面積（指の広さ、スタイラスの広さ）を判定し、その値に応じて、補正ベクトルを変更する。例えば、タッチ位置の面積が広い場合には、補正ベクトルを大きくする。これにより、ユーザの入力に応じた快適な描画が可能となる。
また、ユーザの書き直し、修正操作等に応じて、補正ベクトルを変更してもよい。ユーザのミス入力が多いと考えられる場合、ユーザの修正結果に応じて、補正ベクトルを変更する。この場合、描画開始位置に対して、操作開始位置を変更できるようにしておく。そして、例えば、描画開始位置に対して「最初の入力した操作開始位置」よりも「修正の際の操作開始位置」を遠くに変更する操作が行われた操作履歴を記録する。そして、このような変更回数が所定回数を超えた場合、補正ベクトルを大きくするように変更してもよい。これにより、ユーザ毎の描画特性に応じた描画が可能となる。
また、描画エリア２２０の広さや、描画に用いる対象（ペンの太さ）や、描画対象の大きさ（狭い領域か、広い領域か）に応じて、補正ベクトルを変更してもよい。これにより、より快適な描画環境の提供と、柔軟な入力が可能になる。

・上記第２の実施形態では、ユーザ端末１０の制御部１１は、タッチ位置の特定処理を実行する（ステップＳ２−３）。そして、ユーザ端末１０の制御部１１は、オブジェクト周辺内かどうかについての判定処理（ステップＳ２−４）、移動操作かどうかについての判定処理（ステップＳ２−７）を実行する。これに代えて、ポインターモード処理と同様に、最初のタップで操作（変形、移動、回転）を決定し、２回目のタッチによるスライド操作により、スライド軌跡に応じた変形量、移動量、回転角を決定するようにしてもよい。これにより、操作時の指が邪魔にならず、オブジェクトを設定することができる。

・上記第３、第４の実施形態では、描画エリアを用いて、線画や図形の配色を決定する。ここで、スポイト機能により取り込む属性は配色に限定されるものではない。例えば、模様等のような視覚的な属性のみならず、オブジェクトに割り当てられた名称等の属性を取り込むようにしてもよい。

・上記第１の実施形態では、ユーザ端末１０の制御部１１は、描画開始位置の設定処理を実行する（ステップＳ１−２）。ここでは、タッチパネルディスプレイ１４上でタップを行なう。また、上記第３の実施形態では、ユーザ端末１０の制御部１１は、長押し検知処理を実行する（ステップＳ３−１）。上記第５の実施形態では、最初のタップ位置に始点設定処理（ステップＳ５−２）、２回目のタッチの検知処理（ステップＳ５−３）を実行する。これらの各機能を起動する操作は、他の操作と識別できるものであれば、操作方法は限定されるものではない。例えば、第５の実施形態では、タッチ位置〜タッチオフ位置により始点設定、終点設定を行なうようにしてもよい。

・上記各実施形態では、描画したオブジェクトを含む画像を、ソーシャルネットワークサービスに利用する。描画の適用対象は、ソーシャルネットワークサービスに限定されるものではなく、線画や図形を利用するアプリケーション（ゲーム等）に用いることが可能である。
・上記各実施形態では、一つのアプリケーションプログラムを起動させることにより、制御部１１を、描画処理部１１４、ＳＮＳ処理部１１５として機能させる。ここで、描画処理部１１４とＳＮＳ処理部１１５とは、別のアプリケーションプログラムにより機能させるようにしてもよい。具体的には、描画処理プログラムにより、描画処理部１１４を起動し、描画処理部１１４により生成されたオブジェクトを、他のアプリケーションプログラムの機能に提供するようにしてもよい。

・上記各実施形態では、サーバ装置が生成したデータに基づいて、ユーザ端末に表示させるウェブ表示を行なう。ここで、描画を行なうための画面の少なくとも一部（例えば、ツールメニュー２１０や描画エリア２２０）を、ユーザ端末にインストールされているネイティブアプリケーションによって表示させるネイティブ表示としてもよい。また、ユーザ端末１０及びサーバ装置のそれぞれが処理の一部を担うハイブリッドアプリケーションとすることもできる。

１０…ユーザ端末、１１…制御部、１１１…表示制御部、１１２…タッチ制御部、１１３…アプリケーション実行部、１１４…描画処理部、１１５…ＳＮＳ処理部、１２…メモリ、１３…通信部、１４…タッチパネルディスプレイ、２４１，２４４…線画、３００，４２０，４３０…オブジェクト。

Claims (10)

1. 制御部と入力操作が可能な表示部とを備えた描画処理装置を制御する方法であって、
   前記制御部が、
   描画操作について、前記表示部での入力位置に応じて線画の描画開始位置を特定し、
   前記描画開始位置を特定するための入力操作が解除された後に入力された任意の操作開始位置からの軌跡に応じて前記描画開始位置から描画された線画のオブジェクトを生成することを特徴とする描画処理方法。
2. 前記制御部が、
   描画操作について、オブジェクトの選択を検知した場合、オブジェクトの配置位置を特定し、
   前記配置位置から離れた位置の操作開始位置からの軌跡に応じて、前記オブジェクトの配置を決定することを特徴とする請求項１に記載の描画処理方法。
3. 描画操作について、オブジェクトの部分消去指示を検知した場合、消去開始位置を特定し、
   前記表示部の入力位置に応じた任意の操作開始位置からの軌跡に応じて前記消去開始位置から前記オブジェクトの部分消去を行なうことを特徴とする請求項１又は２に記載の描画処理方法。
4. 前記オブジェクトの配置に対して、複数の操作エリアが設定されており、各操作エリアの選択に応じて、前記オブジェクトに対して異なる操作を実行することを特徴とする請求項２又は３に記載の描画処理方法。
5. 前記オブジェクト内の基準位置に対して、操作開始位置からの軌跡の広がり角度を算出し、前記広がり角度に基づいて、前記オブジェクトの回転操作を実行することを特徴とする請求項２〜４の何れか一項に記載の描画処理方法。
6. 前記表示部において操作された操作位置のオブジェクトの属性を特定し、属性表示領域に表示し、
   操作オフの検知時に、前記属性を描画時の属性として設定することを特徴とする請求項１〜５の何れか一項に記載の描画処理方法。
7. 前記操作位置の周囲に属性候補を出力し、
   操作オフの方向に応じて、前記属性候補の中から描画時に用いる属性を決定することを特徴とする請求項６に記載の描画処理方法。
8. 始点と終点とが設定されたオブジェクトが選択された場合、
   前記表示部の操作位置に前記始点を設定し、
   スライド操作された操作位置に前記終点を設定して、前記オブジェクトを前記表示部に出力し、
   操作オフ時に前記オブジェクトの形状を決定することを特徴とする請求項１〜７の何れか一項に記載の描画処理方法。
9. 制御部と入力操作が可能な表示部とを備えた描画処理装置を制御するプログラムであって、
   前記制御部を、
   描画操作について、前記表示部での入力位置に応じて線画の描画開始位置を特定し、
   前記描画開始位置を特定するための入力操作が解除された後に入力された任意の操作開始位置からの軌跡に応じて前記描画開始位置から描画された線画のオブジェクトを生成する手段として機能させることを特徴とする描画処理プログラム。
10. 制御部と入力操作が可能な表示部とを備えた描画処理装置であって、
    前記制御部が、
    描画操作について、前記表示部での入力位置に応じて線画の描画開始位置を特定し、
    前記描画開始位置を特定するための入力操作が解除された後に入力された任意の操作開始位置からの軌跡に応じて前記描画開始位置から描画された線画のオブジェクトを生成することを特徴とする描画処理装置。

Images