はじめに
地図をスクロールしながら見ている時の様に、
大きな画像の一部を画面に表示して、スクロールさせる。
これは uiライブラリのscroll View を、使用すれば実装できます。
環境
ios + pythonista3
使用ライブラリ
ui ライブラリのviewを使用します。
import ui
pythonistaのドキュメントは、それなりに丁寧に記載されているので 初心者でもある程度
分かります。
英語が優しいのか、自動翻訳様のお力を全面的にお借りしている身でも なんとか理解できました。
とりあえず実装してみる
#! python3
#
# 20210118 ver001 scrollviewに大きな画像を見て表示してスクロールを実装。
#
import ui #scrllviewやimageviewを表示するライブラリ
class epaint(ui.View):
def __init__(self):
w,h = ui.get_screen_size()#uiライブラリのメソッド。画面のサイズを取得して、ｗ、ｈに代入。
#スロールする元の大きなが画像のViewを作成する。この段階では何も表示されない。
self.bv = ui.ImageView()#bvってオブジェクトは、ui.ImageViewだよって宣言して作成した。
self.bv.frame = (0, 0, 3264,2448)#ImageViewの枠サイズを宣言。中に入る画像はこのサイズに延ばされる。
# ちなみに、frameの行は無くても可。無い場合は元の画像サイズでViewが作成される。
self.bv.image = ui.Image.named('test:Peppers')#テスト画像を呼び出して表示(pythonista3内包)
self.bv.bg_color = 'red'#背景色を設定。無くても可。
#ScrollViewを作成。スクロールビューは、画面に表示する枠と理解する。
self.sv = ui.ScrollView()#svってオブジェクトは、ui.ScrollViewだよって宣言。
self.sv.width = w*0.8#画面の８割の幅に表示枠を設定。
self.sv.height = h*0.75#画面の７５％の高さに枠を設定。
self.sv.content_size = (3500,2500)#ScrollViewの元画像を入れる枠のサイズを設定する。
#中に入れるViewのサイズと同じか大きくする。左上に配置される。ImageViewと違って引き延ばされない。
self.sv.scroll_enabld = False # スクロールがTrue有効・False無効。デフォルトTrue
self.sv.add_subview(self.bv)#svにbvを入れる事で ScrollViewの元が画像をcontentsに代入した。
self.add_subview(self.sv)#selfにsvを入れる事で表示させるViewはsvと宣言した。
v = epaint() # クラスを変数に代入。インスタンス化。
v.present('fullscreen')#フルスクリーンでui表示する。
説明
スクロールビューもイメージビューもuiライブラリのViewオブジェクトの一種。
viewオブジェクトは、レタッチソフトとかのレイヤみたいなイメージです。
（ちゃんと順番もあります。）
ここが難しいところですが、ScrollViewの元画像は Viewなら何でもOK。
イメージ意外にButtonも配置できます。何個でも配置できます。
ScrollViewのcontentsで元画像の枠のサイズを決めて、ScrollViewを作成してから
Viewを代入するとcontentsの所に配置されます。
配置座標を指定しないと原点の左上になります。
（座標指定の仕方も、そのうちアップします）
uiライブラリの座標系は 左上が（０，０）ｘ方向は右方向に増加しますが、
ｙ方向は下が増加方向です。普通の座標系とちょっと違うので 最初は戸惑うかも。
最後に、Viewは宣言しただけでは、表示されないのでaddで表示しています。
注意点
・uiオブジェクトの座標系は、左上が原点で右下に向かって増加する。
・Viewには順番がある。タッチイベントの競合。
これは、ScrollView以外にもタッチイベントを使うViewが混在すると
一番上のタッチイベントを使うViewだけが タッチイベントを受け取ります。
具体的には 手書きのパスを取得するviewとScrollViewを両方同時には
使えない。
・Viewには順番がある。順番を入れ替えるメソッドもある。これを利用して
画面を切り替える事もできます。
・元画像のcontentsには 画像の他にボタンとかも入れられます。
ボタンを入れると 画面に入りきらないボタンをスクロールして、押す様な
uiを作る事が出来ます。
最後に
最終的に 拙記事「写真を読み込んで手書きスケッチ。zoom機能付。作ってみた。」の
機能を分解して 紹介していこうと思います。
このツールを作っていて pythonistaでScrollViewについての記事が無くて
本当に苦労したので 最初に紹介しました。
内容的には swiftとかと一緒だったようで、イメージを理解するには
そちらの記事も参考なると思います。