圖片區域性放大鏡,可在大圖上下左右移動並放大對應的區域
現實中使用放大鏡可以放大對應的區域,軟體中有時候也會用到放大鏡功能,比如圖片上某一點看不清楚,你不需要將整張圖片都放大,只需要放大你想看到的部分,這個時候放大鏡就派上用場了。
1.實現原理
如何實現放大鏡的原理呢?一種方式我們可以採用將原圖中的區域性區域提取裁剪,然後在圖片頂層的自定義控制元件上放大對應的倍數展示即可;另外一個種方式是將整圖都放大相應的倍數,然後擷取需要顯示的區域,間接實現放大的效果,我使用的是第二種方法。
當然會涉及到平移,繪製邊框的附加構件。
下面是實現的自定義類,具體註釋見程式碼:
package com.example.zoompicview; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Path.Direction; import android.os.Looper; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; /** * @Description TODO 圖片放大鏡控制元件實現 */ public class ZoomToolView extends View { private Path path; private Matrix matrix; private Paint paint; private Bitmap bitmap; private static final int RADIUS = 80;// 放大鏡半徑 private static final int FACTOR = 3; // 放大係數 private static final int STROKE = 4; // 附加線條寬度 private float currentX, currentY; public ZoomToolView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } public ZoomToolView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ZoomToolView(Context context) { super(context); init(); } private void init() { path = new Path(); path.addCircle(RADIUS, RADIUS, RADIUS, Direction.CW); matrix = new Matrix(); matrix.setScale(FACTOR, FACTOR); paint = new Paint(); paint.setAntiAlias(true); paint.setDither(true); paint.setStrokeWidth(STROKE); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.STROKE); } public Bitmap getBitmap() { return bitmap; } // 設定Bitmap public void setBitmap(Bitmap bitmap) { if (null != bitmap) { this.bitmap = bitmap; } else { try { throw new Exception("bitmap can't be null"); } catch (Exception e) { e.printStackTrace(); } } } @SuppressLint("ClickableViewAccessibility") @Override public boolean onTouchEvent(MotionEvent event) { if (null == bitmap) { return super.onTouchEvent(event); } currentX = event.getX(); currentY = event.getY(); // 控制不會移動出圖片邊界 if (currentX > bitmap.getWidth()) { currentX = bitmap.getWidth(); } else if (currentX < 0) { currentX = 0; } if (currentY > bitmap.getHeight()) { currentY = bitmap.getHeight(); } else if (currentY < 0) { currentY = 0; } invalidateView(); return true; } @SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (null == bitmap) { try { throw new Exception("please setBitmap, bitmap can't be null"); } catch (Exception e) { e.printStackTrace(); } } // 底圖 canvas.drawBitmap(bitmap, 0, 0, null); // 剪下 canvas.translate(currentX - RADIUS, currentY - RADIUS); canvas.clipPath(path); // 移動到path剪下部分顯示 canvas.translate(RADIUS - currentX * FACTOR, RADIUS - currentY * FACTOR); canvas.drawBitmap(bitmap, matrix, null); // 反向平移並繪製十字和外邊框 canvas.translate(currentX * FACTOR - RADIUS, currentY * FACTOR - RADIUS); Path line = new Path(); line.moveTo(0, RADIUS); line.lineTo(RADIUS * 2, RADIUS); line.moveTo(RADIUS, 0); line.lineTo(RADIUS, RADIUS * 2); canvas.drawPath(line, paint); canvas.drawCircle(RADIUS, RADIUS, RADIUS - STROKE, paint); } private void invalidateView() { if (Looper.getMainLooper() == Looper.myLooper()) { invalidate(); } else { postInvalidate(); } } }
2.效果圖
頂部的放大鏡可以隨著手指的移動而移動。
3.Demo 下載
相關推薦
圖片區域性放大鏡,可在大圖上下左右移動並放大對應的區域
現實中使用放大鏡可以放大對應的區域,軟體中有時候也會用到放大鏡功能,比如圖片上某一點看不清楚,你不需要將整張圖片都放大,只需要放大你想看到的部分,這個時候放大鏡就派上用場了。 1.實現原理 如何實現放大鏡的原理呢?一種方式我們可以採用將原圖中的區域性區域提取裁剪,然後在圖
放大鏡二:大圖的移動
scrip padding lang all span pre mouseover gre eight <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
圖片左邊點擊,右邊大圖展示
load func num right float style 100% auto elements css樣式:*{ margin: 0; padding: 0; text-decoration: none; list-style: none;}html,body{ wi
layer.open中select失效,表格中插入圖片,checkbox是否選中,檢視大圖
彈窗官網地址:http://layer.layui.com/ 1.在使用layui時layer.open的彈窗使用十分方便,普通彈窗可以滿足普通需求,prompt可以滿足一個input框的需求,但如果有兩個輸入框或者有select時,就需要用到自定義彈窗了; 2.select失效,失效原因是
通過cocos裁切圖片,將大圖分為小圖
遊戲要用動畫,美工還沒做出來,於是,從網上找來了幾張圖,不過圖是JavaME時代的圖,動畫都是靠裁切來顯示的,於是想將大圖分割成小圖來用。 圖片規格:圖中每個小圖的大小是相等的,基本上都是正行,整列的
jquery特效---jquery顯示縮圖,點選檢視大圖,並且大圖可自適應原圖大小
之前為了實現這樣的效果找了很久,大部分都不是自己想要的。 實現這樣的效果,我用了兩個jquery的框架。一個是 jquery.nailthumb.1.1.js,另一個是jquery.colorbox-min.js。
layui-圖片上傳,可使用選擇圖片->上傳圖片,預覽圖片,刪除圖片(轉載)
原文地址:https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 <!DOCTYPE html> <html> <head> <meta
頁面多個圖片上傳,可刪除程式碼
頁面程式碼: 上傳圖片
JAVA 給圖片新增水印,可設定大小、位置、透明度
/******************************************************************************* * Description: 圖片水印工具類 * * @author xcwc1995 * @versi
mui- 給圖片新增點選檢視大圖功能
<html> <head> <meta charset="utf-8"> <title>圖片放大</title> <meta name="viewport" content="width=device-width,
滑鼠放上去,出現大圖預覽效果
前天逛淘寶,看見淘寶的商品圖片,滑鼠放上去就會就會有相應大圖的預覽,於是就想著自己能不能做一個這樣的效果出來,畢竟以前也看過這樣類似的教程。 思路: 一:頁面佈局 二:滑鼠放上去,出現透明浮動塊
Glide網路圖片滑動檢視,可縮放(PhotoView example)
需求是,介面中拿到的圖片地址List進行滑動檢視,並且可對圖進行縮放檢視,單張圖片載入使用Glide 實現: 使用 ViewPager滑動載入Fragment,Fragment佈局是一個PhotoView(extends ImageView)進行圖片載入和載入後的縮放 首先
js圖片區域性放大鏡效果
在購物網站的展示頁面中常常能看到跟隨滑鼠移動而移動焦點的放大鏡效果,實現這種效果的方法很多,這裡給出一種。 你需要一張大圖和一張縮小尺寸的小圖,小圖在介面中顯示,大圖用來構造放大效果。 <div id="mirror"></div>
JavaScript 圖片區域性放大鏡效果程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x
圖片區域性放大鏡
<!-- 效果:當滑鼠移到小圖片上面時顯示放大鏡 和 放大的區域性圖片 原理: 1、放大鏡是一個絕對定位的半透明的div、通過樣式left和top限控制放大鏡的移動(只能在小圖片容器內移動) 2、放大後的區域性圖片的大小跟放大鏡的大小是成比例的、小圖片
科學家開發新AI系統,可讀取大腦信息並表達復雜思想
人類 2個 動作 都是 編碼 預測 alt 個人 狀況 我們終於找到了一種方法,可以在核磁共振成像的信號中看到這種復雜的想法。美國卡內基梅隆大學的Marcel Just說,思維和大腦活動模式之間的對應關系告訴我們這些想法是如何構建的。 人工智能系統表明,大腦意識模塊是由各種
ASP 例項:頭像上傳。檔案(圖片)上傳,頭像擷取(Jquery-ui外掛來選取擷取區域)
引入JS檔案: <link href="../Css/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> jquery-ui的css檔案 <s
[51NOD1524] 可除圖的最大團(組合,dp)
鏈接 ble spa 組合 sin ons .html color 出現的次數 題目鏈接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1524 題意:略。 這個題相當於是找出現最長的整除鏈。
jQuery PC端圖片預覽,鼠標移上去查看大圖
utf-8 charset order inline logs 鼠標 w3c auto end <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
利用photoView實現可點選放大到全屏顯示的控制元件,效果類似於微信朋友圈點開看大圖
此控制元件繼承自ImageView,實現效果與微信朋友圈點開看大圖相似,點選控制元件後進入沉浸模式全屏顯示大圖,全屏時雙擊或手指拉伸可放大圖片,單擊會退出全屏 老規矩,先上控制元件實現程式碼: /** * 可點選放大全屏顯示的imageView * Created by Administ