精华内容
下载资源
问答
  • leaflet级别无限放大

    千次阅读 2019-01-21 10:52:13
    var osmUrl = '... var maprow = L.map('maprow').setView([37.8542800187483, 112.534177962463], 6); L.tileLayer(osmUrl,{ maxNativeZoom: 18, maxZoom: 100...

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_38818576/article/details/86570562

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var maprow = L.map('maprow').setView([37.8542800187483, 112.534177962463], 6);
    L.tileLayer(osmUrl,{
    	maxNativeZoom: 18,
    	maxZoom: 100
    }).addTo(maprow);
    maprow.on('zoomend', showZoomLevel);
    function showZoomLevel() {
    	maprow.getZoom();
    }
    
    展开全文
  • HTML中图片如何无限级放大

    千次阅读 2012-12-05 10:49:57
    无意在浏览别人的页面的时候,发现了一个很有意思的效果。在新闻列表中的图片,当我们滑动鼠标的时候,图片可以放大或缩小,这样就可以把一些小图片进行自由放大,比JQ的放大简单得多了,看了下代码,不多,就两个...

    HTML中图片如何无限级放大?

    无意在浏览别人的页面的时候,发现了一个很有意思的效果。在新闻列表中的图片,当我们滑动鼠标的时候,图片可以放大或缩小,这样就可以把一些小图片进行自由放大,比JQ的放大简单得多了,看了下代码,不多,就两个地方,我们可以试一下。以下是实现方法,代码很简单。

    一、在页面HEAD中引用方法:
    <SCRIPT language=JavaScript type=text/JavaScript>
    //改变图片大小
    function resizepic(thispic)
    {
    if(thispic.width>400) thispic.width=400;
    }
    //无级缩放图片大小
    function bbimg(o)
    {
      var zoom=parseInt(o.style.zoom, 10)||100;
      zoom+=event.wheelDelta/12;
      if (zoom>0) o.style.zoom=zoom+'%';
      return false;
    }
    </SCRIPT>
     
    二、在页面BODY中引用方法:
    <img src="图片路径" onmousewheel="return bbimg(this)" οnlοad="javascript:resizepic(this)" />

    看看,是不是很简单呀,相信难不倒聪明的你了。本文由YOOZHAN优站,专业网站优化 www.yoozhan.com 为LED软灯条 www.ledrdt.com 推广制作,转载请保留本链接,谢谢合作。

    展开全文
  • 原则上可以无限放大,但是放大部分 像素必须有原图片的1像素,最小也不能小于1*1像素。 思路:  功能解剖:  缩放:微信的缩放能缩放到用户满意的范围。(放大不会超过max倍,缩小不会超过min) ...

    写此程序背景

            看到微信的图片浏览的强大功能,于是自己写了一个。原则上可以无限放大,但是放大部分     像素必须有原图片的1个像素,最小也不能小于1*1像素。

    思路:

       功能解剖:

           缩放:微信的缩放能缩放到用户满意的范围。(放大不会超过max倍,缩小不会超过min)

           移动:当图片高与宽小于屏幕时,能移动图片到任意位置。当高或宽大于屏幕时,移动图片则会截取图片某一模块放大满屏显示。

       最重要的一点就是图片放大时看不出来图片变模糊


       解剖雏形:

           假设用系统自带Matrix函数来控制放大缩小。

           缩小:    可以缩小很小倍,当不易控制倍数(如1.25倍,但Matrix不会那么精确)

           放大:但放大超出屏幕时,Bitmap.createBitmap会在内存中创建一个很大的图(或内存超出系统设定的值或宽高超出屏幕),导致显存或内存不足。

           因为上条放大会出现问题所以本方案绝对不行。


       解剖过度:

       那么要有那么一种缩放方法满足下面条件

           一、能几乎精确的缩小到某一个倍数

           二、放大时内存不会溢出

           基于缩放的截取方法想出以下移动方案

           一、当放大时移动时计算某个参考点在图上移动的位置所占比列(x,y),高宽为屏幕高度/倍数

           二、当缩小的图在屏幕范围之内,那么移动的效果通过移动ImageView的位置实现

       方案:因为缩放的关键是放大,所以可以考虑放大时用截取一段图*n倍不会溢出的图

       截图方案: 一、看到截取就想到用画布canvas解决(于是创建了一个MyBitMap类)能截永远不会内存溢出的放大图。并且图像不会模糊(canvas优秀之处)。

    补充:OOM(Out Of Memory)异常

    1.放大时不模糊的实现:利用canvas获取放大后的图,就能解决安常规放大后模糊的现状。

       2.图片不溢出的实现:在canvas放大时限制图片的大小不超出屏幕就行。

    溢出的情况

       一、图片的高或宽超出了屏幕。所以在canvas放大时限制图片的大小不超出屏幕就行。

       二、某一个bitmap超出了系统对单张图片的限制大小5MB(5MB根据系统不同会有差别)。利用canve截图到的图才几十kb。如果利用常规的Matrix在原来的图基础上来放大(放大后的图片大小为原图大小*当前倍数的平方),就会有超限(5MB)溢出。


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    import android.graphics.Bitmap;
    import android.graphics.Bitmap.Config;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.widget.ImageView.ScaleType;
    /**
     *此处函数是得到剪切的图片
     * @author ZhangJianLin
     *
     */
    public class MyBitMap {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        public MyBitMap() {
        // TODO Auto-generated constructor stub
    }
        /**
         *
         * @param unscaledBitmap the bitmap of source
         * @param dstWidth what width you want to set
         * @param dstHeight What width you want to set
         * @param scalingLogic it is ScaleType
         * @return the scaled bitmap
         */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
        public static Bitmap createScaledBitmap(Bitmap unscaledBitmap, int dstWidth, int dstHeight, ScaleType scalingLogic) {
              Rect srcRect = calculateSrcRect(unscaledBitmap.getWidth(), unscaledBitmap.getHeight(), dstWidth, dstHeight, scalingLogic);
              Rect dstRect = calculateDstRect(unscaledBitmap.getWidth(), unscaledBitmap.getHeight(), dstWidth, dstHeight, scalingLogic);
              Bitmap scaledBitmap = Bitmap.createBitmap(dstRect.width(), dstRect.height(), Config.ARGB_8888);
              Canvas canvas = new Canvas(scaledBitmap);
              canvas.drawBitmap(unscaledBitmap, srcRect, dstRect, new Paint(Paint.FILTER_BITMAP_FLAG));
              return scaledBitmap;
              }
        //根据dstWOrH计算原图应该截取的截图合适的高宽比例图
        public static Rect calculateSrcRect(int srcWidth, int srcHeight, int dstWidth, int dstHeight, ScaleType scalingLogic) {
              if (scalingLogic == ScaleType.CENTER_CROP) {
                final float srcAspect = (float)srcWidth / (float)srcHeight;
                final float dstAspect = (float)dstWidth / (float)dstHeight;
                if (srcAspect > dstAspect) {
                  final int srcRectWidth = (int)(srcHeight * dstAspect);
                  final int srcRectLeft = (srcWidth - srcRectWidth) / 2;
                  return new Rect(srcRectLeft, 0, srcRectLeft + srcRectWidth, srcHeight);
                else {
                  final int srcRectHeight = (int)(srcWidth / dstAspect);
                  final int scrRectTop = (int)(srcHeight - srcRectHeight) / 2;
                  return new Rect(0, scrRectTop, srcWidth, scrRectTop + srcRectHeight);
                }
              else {
                return new Rect(00, srcWidth, srcHeight);
              }
            }
        //根据dstWOrH计算原图应该截取的期望图合适的高宽比例图
            public static Rect calculateDstRect(int srcWidth, int srcHeight, int dstWidth, int dstHeight, ScaleType scalingLogic) {
              if (scalingLogic == ScaleType.FIT_XY) {
                final float srcAspect = (float)srcWidth / (float)srcHeight;
                final float dstAspect = (float)dstWidth / (float)dstHeight;
                if (srcAspect > dstAspect) {
                  return new Rect(00, dstWidth, (int)(dstWidth / srcAspect));
                else {
                  return new Rect(00, (int)(dstHeight * srcAspect), dstHeight);
                }
              else {
                return new Rect(00, dstWidth, dstHeight);
              }
            }
            /**
             *
             * @param unscaledBitmap the bitmap of source
             * @param scale the scale you want
             * @param scalingLogic it is ScaleType
             * @return the scaled bitmap
             */
            //根据放大倍数获得截取图安scale放大的图
            public static Bitmap createBMScaleBitmap(Bitmap unscaledBitmap, Double scale, ScaleType scalingLogic){
            int dstWidth = (int)(unscaledBitmap.getWidth()* scale);
            int dstHeight = (int)(unscaledBitmap.getHeight()*scale);
            return createScaledBitmap(unscaledBitmap, dstWidth, dstHeight, scalingLogic);
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    }



    移动截图起点规则

              每缩放一次,就以图的中心为截获图的中心(Ox,Oy),起点为(Ox-needwidth/2,Oy - needhight/2)。

              在缩放时,把放大后的图在逻辑上的坐标划分为m份,(1单位为屏幕的宽或高),同时每移动一次,就移动1/4份(即每次移动1/4屏幕)。 (单次移动的宽或高像素为                (bitmapWidth/m*n或bitmapHight/m*n,其中n是缩放的倍数,m为计算缩放后的图片高宽跟屏幕对应的宽高的比例,以此得到的值作为x或y的坐标最大值,坐标单位为一个屏幕,每滑次移动半个屏幕或1/3屏幕

             结合安卓的滑动或移动的灵敏度,能完美的模拟出效果图(亲测,如果移动规则用跟踪手的移动位移来移动图片是行不通的,不知道市面上能作出这样的效果是什么样的一个算法,还有待探究)
    核心实现代码及注释如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    package com.imageopen;
    import android.app.Activity;
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.util.DisplayMetrics;
    import android.util.Log;
    import android.view.Menu;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.View.OnTouchListener;
    import android.view.Window;
    import android.widget.Button;
    import android.widget.ImageView;
    import android.widget.ImageView.ScaleType;
    public class BigzoonImage extends Activity {
        ImageView myImageView;
        Button bigButton;//放大按钮
        Button smallButton;//缩小按钮
        View myButtons;
        private Bitmap myBitmap;
        private double bigSize = 1.25;//每次放大的比列
        private double smallSize = 0.8;//每次缩小的比例
        double size = 1;//当前放大的倍数
        double pixel = 30.00;//限制图片缩小时的最小像素
        int bmpWidth;//图片宽度
        int bmpHight;//图片高度
        int bmpSizeWidth;//放大后的图片宽度bmpwidth*size
        int bmpSizeHight;
        int x ;//
        int y ;//
        int screenWidth;      // 屏幕宽(像素,如:480px)
        int screenHeight;     // 屏幕高(像素,如:800px)
        int dstHeight;
        int dstWidth;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            super.onCreate(savedInstanceState);
            setContentView(R.layout.bigzoonimage_main);
            init();
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        private void init(){//初始化各参数的值
            myImageView = (ImageView)findViewById(R.id.bitmap_image);
            bigButton = (Button)findViewById(R.id.button_big);
            smallButton = (Button)findViewById(R.id.button_small);
            myButtons = (View)findViewById(R.id.bitmap_button);
            MyBitmapFactory myBitmapFactory = new MyBitmapFactory(this);
            myBitmap = myBitmapFactory.getDrawBmp(R.drawable.bitmap_test);//事先加载一张图片
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            myImageView.setImageBitmap(myBitmap);
            myImageView.setOnTouchListener(ImageOpenListener);
            bigButton.setOnClickListener(sizeButton);//添加按钮触发事件
            smallButton.setOnClickListener(sizeButton);//同上
            DisplayMetrics dm = new DisplayMetrics();  //声明一个屏幕像素的类屏幕像素
            dm = getResources().getDisplayMetrics();  //得到屏幕像素
            screenWidth  = dm.widthPixels;      // 屏幕宽(像素,如:480px)
            screenHeight = dm.heightPixels;     // 屏幕高(像素,如:800px)
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        private void big(){//放大时图片的变化
            size = bigSize * size;
            Bitmap newBitmap = myBitmap;
            newBitmap = bigCal(myBitmap);
            newBitmap = MyBitMap.createScaledBitmap(newBitmap, dstWidth, dstHeight, ScaleType.FIT_XY);
            myImageView.setImageBitmap(newBitmap);
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        private void small(){//缩小时图片的变化
            size = smallSize * size;
            Bitmap newBitmap = myBitmap;//得到原图的截取图
            newBitmap = bigCal(newBitmap);
            newBitmap = MyBitMap.createScaledBitmap(newBitmap, dstWidth, dstHeight, ScaleType.FIT_XY);
            myImageView.setImageBitmap(newBitmap);
        }
        private OnClickListener sizeButton = new OnClickListener() {//放大缩小的事件
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(v == bigButton){
                    big();
                    }
                else small();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            }
        };
        //每缩放一次,就以图的中心为截获图的中心(Ox,Oy),起点为(Ox-needwidth/2,Oy - needhight/2),宽高为屏幕宽高的图。
        public Bitmap bigCal(Bitmap bitmap){//缩放得到原图的截取图
            bmpWidth = bitmap.getWidth();
            bmpHight = bitmap.getHeight();
            //放大的size最小值,16是指限制的截取的图片最小像素,要是缩小的很小,那么一丁点没有意义,这里的16看个人意思
            int sizeMax = Math.min(myBitmap.getWidth()/16, myBitmap.getHeight()/16);//限定放大的最大倍数
            double sizeMin = Math.max(pixel/myBitmap.getWidth(), pixel/myBitmap.getHeight());//限制缩小的size最小倍数
            if(size > sizeMax){
                size = sizeMax;
            }
            if(size < sizeMin){
                size = sizeMin;
            }
            bmpSizeWidth = (int)(bmpWidth*size);
            bmpSizeHight = (int)(bmpHight*size);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            if(screenWidth > bmpSizeWidth){
                x = 0;
                dstWidth = bmpSizeWidth;
            }else{
                x = (int)((bmpSizeWidth - screenWidth)/(2*size));
                bmpWidth = (int)(screenWidth / size);
                dstWidth = screenWidth;
            }
            if(screenHeight > bmpSizeHight){
                y = 0;
                dstHeight = bmpSizeHight;
            }else{
                y = (int)((bmpSizeHight - screenHeight)/(2*size));//放大时计算以中心的为截取中心的所要截图的左上点坐标(x,y)
                bmpHight = (int)(screenHeight / size);
                dstHeight = screenHeight;
            }
            bitmap = Bitmap.createBitmap(bitmap, x, y, bmpWidth, bmpHight);
            return bitmap;
            }
        //计算缩放的倍数跟屏幕的比例,以得到的值作为x或y的坐标最大值,坐标单位为一个屏幕,每滑动次移动半个屏幕或1/3屏幕
        public double rowOrCowNum(int sizeBitmapWH, int screenWH){
            double num = (sizeBitmapWH * size)/screenWH;
            return num;
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        public Bitmap movCal(Bitmap bitmap, int dx, int dy){//计算移动后的要截取的图
            double coordinateX = rowOrCowNum(myBitmap.getWidth() , screenWidth);//缩放后x坐标,
            double coordinateY = rowOrCowNum(myBitmap.getHeight(), screenHeight);//缩放后y的坐标
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            if(coordinateX > 1){
                if(dx > 0){
                x -= (myBitmap.getWidth()/(coordinateX * 4));
                if(x < 0){
                    x = 0;
                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                }
                if(dx < 0){
                    x += (myBitmap.getWidth()/(coordinateX *4));
                    if(x > (myBitmap.getWidth() - bmpWidth)){
                        x = myBitmap.getWidth() - bmpWidth;
                    }
                }
            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                if(coordinateY > 1){
                    if(dy > 0){
                    y -= (myBitmap.getHeight()/(coordinateY * 4));
                    if(y < 0){
                        y = 0;
                    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                    }
                    if(dy < 0){
                        y += (myBitmap.getHeight()/(coordinateY *4));
                        if(y > (myBitmap.getHeight() - bmpHight)){
                            y = myBitmap.getHeight() - bmpHight;
                        }
                    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            }
            bitmap = Bitmap.createBitmap(bitmap, x, y, bmpWidth, bmpHight);
            bitmap = MyBitMap.createScaledBitmap(bitmap, dstWidth, dstHeight, ScaleType.FIT_XY);
            return bitmap;
        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        private OnTouchListener ImageOpenListener = new OnTouchListener() {//移动监听
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            int lastX;
            int lastY;
            int left;//图片的左边界的坐标
            int right;//图片右边界坐标
            int top;//图片上边界的坐标
            int bottom;//图片下边界的坐标
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                switch(event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    lastX = (int)event.getRawX();
                    lastY = (int)event.getRawY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    int dx = (int)event.getRawX() - lastX;//dx为在屏幕的x轴上移动的距离
                    int dy = (int)event.getRawY() - lastY;//dy为在屏幕的y轴上移动的距离
                    Bitmap newBitmap;