在2d图形可视化开发中，经常要绘制对象的选中效果。 一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。 发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。
绘制边框
绘制边框是最容易实现的效果，比如下面的图片
要绘制边框，只需要使用strokeRect的方式即可。效果如下图所示：
这个代码也很简单，如下所示：
ctx1.strokeStyle = "red";
ctx1.lineWidth = 2;
ctx1.drawImage(img, 1, 1,img.width ,img.height)
ctx1.strokeRect(1,1,img.width,img.height);
绘制轮廓
问题是，简单粗暴的加一个边框，并不能满足需求。很多时候，人们需要的是轮廓的效果，也就是图片的有像素和无像素的边缘处。如下图的效果所示：
要实现上述效果，最容易想到的思路就是通过像素的计算来判断边缘，并对边缘进行特定颜色的像素填充。但是像素的计算算法并不容易，简单的算法又很难达到预期的效果，而且由于逐像素操作，效率不高。
考虑到在三维webgl中，计算轮廓的算法思路是这样的：
- 先绘制三维模型自身，并在绘制的时候启动模板测试，把三维图像保存到模板缓冲中。
- 把模型适当放大，用纯属绘制模型，并在绘制的时候启用模板测试，和之前的模板缓冲区中的像素进行比较，如果对应的坐标处在之前模板缓冲区中有像素，就不绘制纯色。
依据上述的原理，就可以绘制处三维对象的轮廓了。下面是一个示例效果，（参考https://stemkoski.github.io/Three.js/Outline.html）
在2d canvas里面有类似的原理可以实现轮廓效果，就是使用globalCompositeOperation了。 大体思路是这样的：
- 首先绘制放大一些的图片。
- 然后开启globalCompositeOperation = ‘source-in’, 并用纯色填充整个canvas区域，由于source-in的效果，纯色会填充放大图片有像素的区域。
- 使用默认的globalCompositeOperation（source-over），用原始尺寸绘制图片。
绘制放大一些的图片
通过drawImage的参数可以控制绘制图片的大小，如下所示，drawImage有几个形式：
1 void ctx.drawImage(image, dx, dy);
2 void ctx.drawImage(image, dx, dy, dWidth, dHeight);
3 void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
其中dx，dy 代表绘制的起始位置，一般绘制的时候使用第一个方法，代表绘制的大小就是原本图片的大小。而使用第二个方法，我们可以指定绘制的尺寸，我们可以使用第二个方法绘制放大的图片，代码如所示：
ctx.drawImage(img, p - s, p - s, w + 2 * s, h+ 2 * s);
其中p代表图片本身的绘制位置，s代表向左，向上的偏移量，同时图片的宽和高都增加 2 * s
用纯色填充放大图片的区域
在上一步绘制的基础上，开启globalCompositeOperation = ‘source-in’, 并用纯色填充整个canvas区域。 代码如下所示：
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, cw, ch);
最终的效果如下图所示：
为什么会出现这种效果是因为使用了globalCompositeOperation = ‘source-in’,具体原理可以参考本人的其他文章。
绘制原始图片
最后一步就是绘制原始图片，代码如下所示：
ctx.globalCompositeOperation = "source-over"；
ctx.drawImage(img, p, p, w, h);
首先恢复globalCompositeOperation为默认值 “source-over”，然后按照原本的大小绘制图片。
经过以上步骤，最终的效果如下图所示：
可以看出最终获得了我们要的效果。
只显示轮廓
如果我们只想得到图片的轮廓，则可以在最后绘制的时候，globalCompositeOperation 设置为“destination-out”，代码如下：
ctx.globalCompositeOperation = "destination-out";
ctx.drawImage(img, p, p, w, h);
效果图如下：
轮廓粗细不一致的问题
上面的算法实现，是在图片的有像素值区域中心和图片本身的几何中心基本一直，如果图片的有像素值的中心和图片本身的几何中心相差比较大，则会出现轮廓粗细不一致的情况，比如下面这张图：
上半部分是透明的，下半部分是非透明的，像素的中心在3/4出，而几何中心在1/2处。使用上面的算法，该图片的轮廓如下：
可以发现上边缘的轮廓宽度变成了0。
在比如下图，
绘制后上边缘的轮廓比其他边缘的细。
怎么处理这种情况呢？可以在绘制放大图片的时候，不直接使用缩放，而是在上下左右，上左，上右，下左，下右几个方向进行偏移绘制，多次绘制，代码如下：
var dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1], // offset array
// draw images at offsets from the array scaled by s
for (var i = 0; i < dArr.length; i += 2) {
ctx.drawImage(img, p + dArr[i] * s, p + dArr[i + 1] * s, w, h);
}
再看上面图片的轮廓效果，如下所示：
半透明的情况
我在其他文章中说过，globalCompositeOperation为"source-in"的时候，source图形的透明度，会影响到目标绘制图形的透明度。所以会导致轮廓的像素值会乘以透明度。比如，我们在绘制放大图的时候，设置globalAlpha = 0.5进行模拟。
最后的绘制效果如下：
可以看到轮廓的颜色变浅了，解决办法就是多绘制几次放大图。比如：
ctx.globalAlpha = 0.5;
ctx.drawImage(img, p - s, p - s, w + 2 * s, h+ 2 * s);
ctx.drawImage(img, p - s, p - s, w + 2 * s, h+ 2 * s);
而上面通过偏移的方式绘制的时候，本身都绘制了好多遍，所以不存在这个问题。如下：
ctx.globalAlpha = 0.5;
for (var i = 0; i < dArr.length; i += 2) {
ctx.drawImage(img, p + dArr[i] * s, p + dArr[i + 1] * s, w, h);
}
如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgWBajGC-1617175276389)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfe45a37a17f4ca6916d361ae767bfc9~tplv-k3u1fbpfcp-zoom-1.image)]
当然，在透明度很低的情况下，使用绘制很多遍的方式，不是很好的解决方案。
# 使用算法（marching-squares-algorithm）
上面的方法对于有些图片效果就很不好，比如这张图片：
由于其有很多中空的效果，所以其最终效果如下图所示：
但是想要的只是外部的轮廓，而不需要中空部分也绘制上轮廓效果。此时需要使用其他的算法。 直接使用marching squares algorithm 可以获取图片的边缘。这一块的算法具体实现本文不再讲解，后续有机会单独一篇文章进行讲解。 此处直接使用开源的实现。比如可以使用 https://github.com/sakri/MarchingSquaresJS，代码如下：
function drawOuttline2(){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var w = img.width;
var h = img.height;
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var pathPoints = MarchingSquares.getBlobOutlinePoints(canvas);
var points = [];
for(var i = 0;i < pathPoints.length;i += 2){
points.push({
x:pathPoints[i],
y:pathPoints[i + 1],
})
}
// ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#00CCFF';
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i += 1) {
var point = points[i];
ctx.lineTo(point.x,point.y);
}
ctx.closePath();
ctx.stroke();
ctx1.drawImage(canvas,0,0);
}
首先使用调用MarchingSquaresJS的方法获取img图像的轮廓点的集合，然后把所有的点连接起来。形成轮廓图，最终效果如下：
不过可以看出，MarchingSquares 算法获得的轮廓效果锯齿相对较多的。有光这块算法的优化，本文不讲解。
总结
对于没有中空效果的图片，我们一般不采用MarchingSquares算法，而采用前面的一种方式来实现，效率高，而且效果相对更好。 而对于有中空，就会使用MarchingSquares算法，效果相对差，效率也相对低一些，实际应用中，可以通过缓存来降低性能的损耗。
本文的起源来资源一个2.5D项目，上一张项目图吧：
参考文档
https://www.emanueleferonato.com/2013/03/01/using-marching-squares-algorithm-to-trace-the-contour-of-an-image/
https://github.com/sakri/MarchingSquaresJS
https://github.com/OSUblake/msqr
http://users.polytech.unice.fr/~lingrand/MarchingCubes/algo.html#squar
如果对可视化感兴趣, 关注公号“ITMan彪叔” 可以及时收到更多有价值的文章。也可以加微信541002349进行交流。