三章-25-心形图层遮罩效果
2020-04-20 本文已影响0人
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1025.html ，对应的 官网示例 https://openlayers.org/en/latest/apidoc/module-ol_render_Event-RenderEvent.html#context
image.png
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>
