涂抹你的遮盖层，掀开神秘的古地图
※ 图片资源转载于 中国地图出版集团官方微博 文章 "葛石卿及其《袖珍上海警察区分局图》"
想要了解更多 地图 相关知识和报道，欢迎关注
文章目录
- 效果演示
- 代码分释
- 全部代码
效果演示
代码分释
整体思路：
通过加载一张图片，从下至上构建了blur和bitmap两个图层。blur通过配置BlurFilter和ColorMatrixFilter滤镜，显示清爽的模糊图像层。bitmap使用AlphaMaskFilter滤镜将其作为蒙版应用到图像。通过擦除动作绘制bitmap中的蒙版，从而显示清晰图像
从最终实现来看， 需要用到四个显示元素（从下到上）：
blur模糊的图片text显示在模糊图片上方的标题文字bitmap可涂抹显示图片的位图层cursor笔触区域显示圆圈
0 加载图片 & 创建舞台
image = new Image()
image.onload = handleComplete
image.src = '../_assets/img/xzshjcqfjt_map.jpg'
stage = new createjs.Stage('examCanvas')
1 blur层：
blur = new createjs.Bitmap(image)
blur.filters = [
new createjs.BlurFilter(24, 24, 2),
new createjs.ColorMatrixFilter(new createjs.ColorMatrix(40))
]
blur.cache(0, 0, 960, 696)
构建Bitmap类，并设置BlurFilter和ColorMatrixFilter滤镜
BlurFilter([blurX=0], [blurY=0], [quality=1])
blurX水平模糊半径 |blurY垂直模糊半径 |quality模糊迭代次数
ColorMatrixFilter(matrix)
matrix描述颜色的4*5矩阵
ColorMatrix(brightness, contrast, saturation, hue)
brightness亮度 |contrast对比度 |saturation饱和度 |hue色调
2 text层：
text = new createjs.Text('Loading...', '30px 微软雅黑', '#FFF')
text.set({
x: stage.canvas.width / 2, y: stage.canvas.height / 2 - 40 });
text.shadow = new createjs.Shadow('rgba(9,153,166,1)', 0, 5, 5)
text.textAlign = 'center'
text.text = "点击并拖动鼠标查看\n\n《袖珍上海警察区分局图》"
构建Text类，并设置Shadow效果
Shadow(color, offsetX, offsetY, blur)
color阴影颜色 |offsetXx轴偏移 |offsetYy轴偏移 |blur模糊效果大小
3 bitmap层
drawingCanvas = new createjs.Shape()
drawingCanvas.cache(0, 0, image.width, image.height)
bitmap = new createjs.Bitmap(image)
maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas)
bitmap.filters = [maskFilter]
bitmap.cache(0, 0, image.width, image.height);
drawingCanvas的cacheCanvas作为遮罩层，被加载到bitmap图像的滤镜中，起始大小充满全部画布
AlphaMaskFilter(mask)
maskHTMLImageElement | HTMLCanvasElement
4 cursor层
cursor = new createjs.Shape(
new createjs.Graphics().beginFill('rgba(255,255,255,0.5)').drawCircle(0, 0, 50)
)
cursor.cursor = "pointer"
构建Shape类，绘制一个半透明的⚪，作为跟随鼠标的笔触
5 设置鼠标事件
function handleMouseDown(event) {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY)
oldMidPt = oldPt
isDrawing = true
}
function handleMouseMove(event) {
cursor.x = stage.mouseX
cursor.y = stage.mouseY
if (!isDrawing) {
stage.update()
return
}
// 移位符计算>>1，相当于取oldPt和stage.mouse两个点的中间值
var midPoint = new createjs.Point(
oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1
)
// 根据鼠标移动轨迹，依次设置遮罩层笔触样式，颜色，起始点，以及绘制路线
drawingCanvas.graphics.clear()
.setStrokeStyle(100, 'round', 'round')
.beginStroke('rgba(0,0,0,0.2')
.moveTo(midPoint.x, midPoint.y)
.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y)
oldPt.x = stage.mouseX
oldPt.y = stage.mouseY
oldMidPt.x = midPoint.x
oldMidPt.y = midPoint.y
// 在保留缓存的基础上继续绘制
drawingCanvas.updateCache('source-over')
bitmap.updateCache()
stage.update()
}
function handleMouseUp(event) {
isDrawing = false
}
依次设置了鼠标按下、鼠标移动和鼠标抬起的事件
setStrokeStyle(thickness, [caps=0], [joints=0], [miterLimit=10], [ignoreScale=false])
thickness笔触宽度 |caps|joints|miterLimit|ignoreScale
beginStroke(color)
color笔触颜色
全部代码
Github - AlphaMaskReveal
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AlphaMaskRevealtitle>
<link rel="stylesheet" href="../_assets/css/shared.css" />
<script src="../_assets/js/shared.js">script>
<script src="../lib/easeljs-NEXT.js">script>
head>
<body onload="init()">
<header class="Nora7aki">
<h1>蒙版滤镜动态显示 AlphaMaskFilter revealh1>
<p>
通过一张图片，从下至上构建了<code>blurcode>和<code>bitmapcode>两个图层。<code>blurcode>通过配置<code>BlurFiltercode>和<code>ColorMatrixFiltercode>滤镜，显示清爽的模糊图像层。<code>bitmapcode>使用<code>AlphaMaskFiltercode>滤镜将其作为蒙版应用到图像。通过擦除动作绘制<code>bitmapcode>中的蒙版，从而显示清晰图像。
p>
header>
<div>
<canvas id="examCanvas" width="960" height="696">canvas>
div>
<script>
let stage // createjs舞台
let isDrawing // 绘制状态
let drawingCanvas // 绘制区域
let oldPt, oldMidPt // 绘制点、绘制中点
let image // image对象
let bitmap // 绘制层位图
let maskFilter // 绘制层蒙版
let cursor // 鼠标指针图形
let text // 文本图形
let blur // 模糊图片层
function init() {
shared.loading()
image = new Image()
image.onload = handleComplete
image.src = '../_assets/img/xzshjcqfjt_map.jpg'
stage = new createjs.Stage('examCanvas')
text = new createjs.Text('Loading...', '30px 微软雅黑', '#FFF')
text.set({
x: stage.canvas.width / 2, y: stage.canvas.height / 2 - 40 });
text.shadow = new createjs.Shadow('rgba(9,153,166,1)', 0, 5, 5)
text.textAlign = 'center'
}
function handleComplete() {
shared.loaded()
createjs.Touch.enable(stage);
stage.enableMouseOver()
stage.addEventListener('stagemousedown', handleMouseDown)
stage.addEventListener('stagemouseup', handleMouseUp)
stage.addEventListener('stagemousemove', handleMouseMove)
drawingCanvas = new createjs.Shape()
drawingCanvas.cache(0, 0, image.width, image.height)
bitmap = new createjs.Bitmap(image)
maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas)
bitmap.filters = [maskFilter]
bitmap.cache(0, 0, image.width, image.height);
blur = new createjs.Bitmap(image)
blur.filters = [
new createjs.BlurFilter(24, 24, 2),
new createjs.ColorMatrixFilter(new createjs.ColorMatrix(40))
]
blur.cache(0, 0, 960, 696)
text.text = "点击并拖动鼠标查看\n\n《袖珍上海警察区分局图》"
stage.addChild(blur, text, bitmap)
cursor = new createjs.Shape(
new createjs.Graphics().beginFill('rgba(255,255,255,0.5)').drawCircle(0, 0, 50)
)
cursor.cursor = "pointer"
stage.addChild(cursor)
stage.update()
}
function handleMouseDown(event) {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY)
oldMidPt = oldPt
isDrawing = true
}
function handleMouseMove(event) {
cursor.x = stage.mouseX
cursor.y = stage.mouseY
if (!isDrawing) {
stage.update()
return
}
// 移位符计算>>1，相当于取oldPt和stage.mouse两个点的中间值
var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1)
// 根据鼠标移动轨迹，依次设置遮罩层笔触样式，颜色，起始点，以及绘制路线
drawingCanvas.graphics.clear()
.setStrokeStyle(100, 'round', 'round')
.beginStroke('rgba(0,0,0,0.2')
.moveTo(midPoint.x, midPoint.y)
.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y)
oldPt.x = stage.mouseX
oldPt.y = stage.mouseY
oldMidPt.x = midPoint.x
oldMidPt.y = midPoint.y
drawingCanvas.updateCache('source-over')
bitmap.updateCache()
stage.update()
}
// 在保留缓存的基础上继续绘制
function handleMouseUp(event) {
isDrawing = false
}
script>
body>
html>
欢迎关注微信公众号 "书咖里的曼基康"
