七章-86-放大镜效果

作者: 彩云飘过 | 来源:发表于2020-03-27 17:54 被阅读0次

七章-86-放大镜效果
iOS放大镜效果实现-ASMagnifierManger
放大镜效果
放大镜效果
放大镜效果
放大镜效果
放大镜效果
放大镜效果
十.放大镜效果的demo
js 放大镜效果

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1086.html ，对应的官网示例

image.png

核心技术点：
放大2倍之后，将方形的图像保存在ImageData：dest里面，然后针对每一个像素进行放大和平移
原来的一个像素，变成新的4个像素

<!DOCTYPE html>
<html>

<head>
 <title>放大镜</title>
 <link rel="stylesheet" href="../include/ol.css" type="text/css" />
 <script src="../include/ol.js"></script>
</head>
<style></style>

<body>

 <div id="map" class="map"></div>
 <script>
   var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';

   var imagery = new ol.layer.Tile({
    /* source: new ol.source.BingMaps({
       key: key,
       imagerySet: 'Aerial',
       crossOrigin: "anonymous"
     }) */
      source: new ol.source.OSM()
   });

   var container = document.getElementById('map');

   var map = new ol.Map({
     layers: [imagery],
     target: container,
     view: new ol.View({
       center: ol.proj.fromLonLat([-109, 46.5]),
       zoom: 6
     })
   });

   var radius = 75;
   document.addEventListener('keydown', function (evt) {
     if (evt.which === 38) {
       radius = Math.min(radius + 5, 150);
       map.render();
       evt.preventDefault();
     } else if (evt.which === 40) {
       radius = Math.max(radius - 5, 25);
       map.render();
       evt.preventDefault();
     }
   });


   var mousePosition = null;

   container.addEventListener('mousemove', function (event) {
     mousePosition = map.getEventPixel(event);
     map.render();
   });

   container.addEventListener('mouseout', function () {
     mousePosition = null;
     map.render();
   });

   // 根据鼠标位置计算圆形区域，
   imagery.on('postcompose', function (event) {
     if (mousePosition) {
       var context = event.context;
       var pixelRatio = event.frameState.pixelRatio;
       var half = radius * pixelRatio;
       var centerX = mousePosition[0] * pixelRatio;
       var centerY = mousePosition[1] * pixelRatio;
       var originX = centerX - half;
       var originY = centerY - half;
       var size = 2 * half + 1;
       
       //关键：放大算法
       //放大2倍之后，将方形的图像保存在ImageData：dest里面，然后针对每一个像素进行放大和平移
       var sourceData = context.getImageData(originX, originY, size, size).data;
       var dest = context.createImageData(size, size);
       var destData = dest.data;
       for (var j = 0; j < size; ++j) {
         for (var i = 0; i < size; ++i) {
           var dI = i - half;
           var dJ = j - half;
           var dist = Math.sqrt(dI * dI + dJ * dJ);
           var sourceI = i;
           var sourceJ = j;
           if (dist < half) {
             sourceI = Math.round(half + dI / 2);
             sourceJ = Math.round(half + dJ / 2);
           }
           var destOffset = (j * size + i) * 4;
           var sourceOffset = (sourceJ * size + sourceI) * 4;
           destData[destOffset] = sourceData[sourceOffset];
           destData[destOffset + 1] = sourceData[sourceOffset + 1];
           destData[destOffset + 2] = sourceData[sourceOffset + 2];
           destData[destOffset + 3] = sourceData[sourceOffset + 3];
         }
       }
       
       context.beginPath();
       context.arc(centerX, centerY, half, 0, 2 * Math.PI);
       context.lineWidth = 3 * pixelRatio;
       context.strokeStyle = 'rgba(255,255,255,0.5)';
       context.putImageData(dest, originX, originY);
       context.stroke();
       context.restore();
     }
   });
 </script>
</body>

</html>