雑なサンプルで申し訳ないのですが、添付の画像を元にやりたいことを説明します。
体の各部位ごとに分かれた円をそれぞれクリックすると、クリックした部位に赤枠がつくような動きを実現したいです。
サンプルでは赤枠がすべて出ていますが、クリックした部位のみ赤枠が出るようにしたいと考えています。
・赤枠なしと赤枠ありの画像を重ねる
・赤枠ありの画像だけvisible設定を入れておく
・赤枠なしの画像をクリックすると、インプットフォームに文字列が入る
例)頭をクリックした場合は、「頭」と入る
・赤枠ありの画像のvisible設定は、インプットフォームに特定の文字列が入ったら表示する設定にする
例)インプットフォームに「頭」と文字があったら赤枠ありの画像を表示
動作としては実現できそうだと思っているのですが、赤枠ナシの画像が表示されなかったり、赤枠ありの画像を表示したときにレイアウトがずれたりしてしまって、うまく動きません。
画面遷移を伴えば綺麗にレイアウトできるとは思うのですが、用途的に性能を求めていて、1秒以内に切り替わってほしく上記のような手法を検討していました。
レイアウトが崩れないように上記を実現するのは難しいでしょうか。。
もし方法があればご教示頂けるとありがたいです。