👧🏻 👨🏽‍🎓 ⏮️ 最初からAndroidコンポーネント-2-画像の拡大鏡 🎇 💆🏼 📈

主にさまざまなショップやトレーディングフロアのウェブサイトで、インターネット上で時々、さまざまな商品の写真をより詳細に調べることができるソフトウェア拡大鏡に出会います（同様のことがウェブサイトwww.ebay.comで実装されています）。このようなAndroidプラットフォーム用の拡大鏡（特に初心者向け）の作成に取り組んでいきます。

割り当て：写真のより詳細なレビューのためにコンポーネント拡大鏡を開発します。最初に、画面にはデバイスの画面に比例した寸法の画像が表示されます（画像は画面全体に表示されます）。画面上で指をタッチすると、画像が増加し、タッチに関連してこの領域が表示されます。つまり、セントをクリックすると、画像の拡大された中央部分が表示され、右上隅をクリックすると、右上部分の拡大部分が表示されます。 n。

準備する

新しいプロジェクトとPZoomクラスを作成し、Viewクラスを祖先として使用します。

次の機能に興味があります。

PZoom-クラスコンストラクター。

onDraw-描画関数。コンポーネントを再描画する必要があるたびに呼び出されます。

onTouchEvent-外部イベントを追跡する機能。ユーザーが指で画面をクリックしてコンポーネントに触れるたびに呼び出されるほか、コンポーネント上で指を動かして指を押すたびに呼び出されます。

タスクを簡素化するために、Drawableフォルダーに「img」という名前で以前に配置された1つの画像のみを使用します（画像が大きいほど、視覚効果が得られます）。クラスの開始時に、Drawable型の新しいオブジェクトを宣言します。

private Drawable image; //

さらにコンストラクターで、画像に目的の画像を配置し、フレームを設定します。

 image = context.getResources().getDrawable(R.drawable.img); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());

次に、描画手順を再作成します。

  @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) image.draw(canvas); //      canvas.restore(); //  ,      }

アプリケーションのメインクラスに移動し、次のようにクラスのコンストラクターを変更します。

  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new PZoom(this)); }

これらのアクションはPzoomクラスを作成し、それをメインクラスとして定義します。つまり、このコンポーネントのみが画面に表示されるようになります。

これで、アプリケーションを実行すると、画面に完全に収まらないため、ダウンロードした画像の一部のみが画面に表示されます（画像は画面よりも大きくなります）。

機能的

まず、デフォルトで画像を画面の中央に合わせてみましょう。サイズは画面に比例します。これを行うには、表面上の画像の位置を決定する別個のSetCenter関数と、比率の正しい乗数を作成します。

クラスの先頭で追加の変数を宣言します。

  int X = 0,Y = 0; //     float scale = 0; //    int pX = 0, pY = 0; //     int dWidth = 0, dHeight = 0; //

ここで、関数自体の本体（それを噛むのは意味がありません、それは初等数学です）：

  void SetCenter(){ //     if(dWidth>dHeight) // scale = (float)dHeight/image.getIntrinsicHeight(); else scale = (float)dWidth/image.getIntrinsicWidth(); //    if((dWidth-image.getIntrinsicWidth()*scale)>0){ X = (int)((dWidth-(image.getIntrinsicWidth()*scale))/2/scale); Y = 0; } else { X = 0; Y = (int)((dHeight-(image.getIntrinsicHeight()*scale))/2/scale); } }

次に、ウィジェットの描画関数を追加します。

 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) if (dWidth==0){ //        dWidth = canvas.getWidth(); dHeight = canvas.getHeight(); } if (pX==0) { //    SetCenter(); //      } canvas.scale(scale, scale); // ZooM canvas.translate(X,Y); //   image.draw(canvas); //      canvas.restore(); //  ,      }

初めに、ウィジェットサイズ変数のデータの可用性のチェックがあり、それらがゼロに等しい場合、ウィジェットサイズがわかります。次に、カーソル位置のデータの存在がチェックされ、ゼロの場合（ユーザーの指がウィジェット上にない場合）、画像のセンタリング機能が開始されます。その後、画像はストレッチ値に従ってサイズ変更されます。それから絵のシフトがあります。最後に、絵が描かれ、マトリックスがリセットされます。

最も重要なこと-押された指に対する画像のサイズと位置の変更。まず、 onTouchEvent画面に指を配置する手順を再定義する必要があります。

  @Override public boolean onTouchEvent(MotionEvent event) { //   pX=(int) event.getX(); //   X pY=(int) event.getY(); //   Y int Action=event.getAction(); //  //   if (Action==MotionEvent.ACTION_UP){ pX = 0; pY = 0; } invalidate(); //   return true; }

誰が興味を持っているかについては説明しません。最初の記事を参照してください。画面上の画像の新しい位置を計算するための手順を作成するために残り、次の形式になります。

  void NewPosition(){ scale = 1; //    //          X = (int)((float)-image.getIntrinsicWidth()*((float)pX/dWidth)+((float)dWidth*((float)pX/dWidth))); Y = (int)((float)-image.getIntrinsicHeight()*((float)pY/dHeight)+((float)dHeight*((float)pY/dHeight))); //         if (X>0) X=0; if (Y>0) Y=0; }

ウィジェットのレンダリング関数を少し変更します。つまり、カーソル位置変数が空でない場合、新しい位置を計算します。

 if (pX==0) { //    SetCenter(); //      } else { NewPosition(); //      }

すべてが正しく行われた場合、画像をクリックすると、画像が増加し、ユーザーの指に対して画面上を動き回ります。いいテストをしてください！

虫眼鏡クラスの最終ビュー：

 package com.gc986.photozoom; import android.content.Context; import android.graphics.Canvas; import android.graphics.drawable.Drawable; import android.view.MotionEvent; import android.view.View; public class PZoom extends View { private Drawable image; //   int X = 0,Y = 0; //     float scale = 0; //    int pX = 0, pY = 0; //     int dWidth = 0, dHeight = 0; //   public PZoom(Context context) { super(context); //     image = context.getResources().getDrawable(R.drawable.img); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) if (dWidth==0){ //        dWidth = canvas.getWidth(); dHeight = canvas.getHeight(); } if (pX==0) { //    SetCenter(); //      } else { NewPosition(); //      } canvas.scale(scale, scale); // ZooM canvas.translate(X,Y); //   image.draw(canvas); //      canvas.restore(); //  ,      } /** */ void SetCenter(){ //     if(dWidth>dHeight) // scale = (float)dHeight/image.getIntrinsicHeight(); else scale = (float)dWidth/image.getIntrinsicWidth(); //    if((dWidth-image.getIntrinsicWidth()*scale)>0){ X = (int)((dWidth-(image.getIntrinsicWidth()*scale))/2/scale); Y = 0; } else { X = 0; Y = (int)((dHeight-(image.getIntrinsicHeight()*scale))/2/scale); } } /**   */ void NewPosition(){ scale = 1; //    //          X = (int)((float)-image.getIntrinsicWidth()*((float)pX/dWidth)+((float)dWidth*((float)pX/dWidth))); Y = (int)((float)-image.getIntrinsicHeight()*((float)pY/dHeight)+((float)dHeight*((float)pY/dHeight))); //         if (X>0) X=0; if (Y>0) Y=0; } @Override public boolean onTouchEvent(MotionEvent event) { //   pX=(int) event.getX(); //   X pY=(int) event.getY(); //   Y int Action=event.getAction(); //  //   if (Action==MotionEvent.ACTION_UP){ pX = 0; pY = 0; } invalidate(); //   return true; } }

理想的になるはずです-http://youtu.be/GHB91_RzORY

次のリンクで、すべてのコメント付きのサンプルアーカイブをダウンロードできます-http://www.anprog.com/documents/Photo_Zoom.zip

最初からAndroidコンポーネント-2-画像の拡大鏡

準備する

機能的

More articles: