涂抹你的遮盖层，掀开神秘的古地图

最新推荐文章于 2024-04-08 13:24:29 发布

Nora Taki

最新推荐文章于 2024-04-08 13:24:29 发布

阅读量163

点赞数 1

分类专栏： CreateJs 文章标签： js canvas

本文链接：https://blog.csdn.net/u011974819/article/details/113628878

版权

CreateJs 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

※ 图片资源转载于中国地图出版集团官方微博文章 "葛石卿及其《袖珍上海警察区分局图》"
想要了解更多地图相关知识和报道，欢迎关注

文章目录

效果演示
代码分释
全部代码

效果演示

效果展示

代码分释

整体思路：

通过加载一张图片，从下至上构建了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 阴影颜色 | offsetX x轴偏移 | offsetY y轴偏移 | 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)

mask HTMLImageElement | 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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlphaMaskReveal</title>
    <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 reveal</h1>
        <p>
            通过一张图片，从下至上构建了<code>blur</code>和<code>bitmap</code>两个图层。<code>blur</code>通过配置<code>BlurFilter</code>和<code>ColorMatrixFilter</code>滤镜，显示清爽的模糊图像层。<code>bitmap</code>使用<code>AlphaMaskFilter</code>滤镜将其作为蒙版应用到图像。通过擦除动作绘制<code>bitmap</code>中的蒙版，从而显示清晰图像。
        </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>