三章-25-心形图层遮罩效果

作者: 彩云飘过 | 来源:发表于2020-04-20 17:51 被阅读0次

三章-25-心形图层遮罩效果
Day4——遮罩动画
图层蒙版&通道
CALayer的mask属性简介
iOS - CALayer的mask属性学习
css遮罩
【AE教程】点赞
AUTOCAD
画地为Mask，随心所欲的高效遮罩组件[Unity](转)
零零碎碎的知识点

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

源码见 1025.html ，对应的官网示例 https://openlayers.org/en/latest/apidoc/module-ol_render_Event-RenderEvent.html#context

image.png

<!DOCTYPE html>
<html>
  <head>
    <title>心形图层遮罩效果</title>
    <link rel="stylesheet" href="../include/ol.css" type="text/css">
    <script src="../include/ol.js"></script>

  </head>
  <body>
     <div id="map" class="map"></div>

    <script>
     var osm = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var map = new ol.Map({
        layers: [osm],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      //precompose 在层渲染之前触发。事件对象将没有上下文集。
      osm.on('precompose', function(event) {
        
        var ctx = event.context; //获取到canvas的上下文，该实例会用到canvas绘图的基础知识
        
        ctx.save(); //保存现场；若不保存，会一次次绘制心形，造成毛边

        var pixelRatio = event.frameState.pixelRatio; //像素密度
        var size = map.getSize(); //地图尺寸
        //canvas初始绘图位置是左上角，需要把绘制位置移动到屏幕的某一点位置再开始绘图
        // 平移
        ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
        //缩放
        ctx.scale(3 * pixelRatio, 3 * pixelRatio);
        //平移
       ctx.translate(-75, -80);
       
       //绘制心形路径
        ctx.beginPath();
        ctx.moveTo(75, 40);
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
        
        ctx.clip(); //将canvas所有内容显示在绘制的边界中间
        ctx.translate(75, 80);
        ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio);
        ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
       });

      //postcompose 在所有层渲染后触发。事件对象将没有上下文集。
      osm.on('postcompose', function(event) {
        var ctx = event.context;
         ctx.restore(); //恢复保存的上下文现场
      });
    </script>
  </body>
</html>