绘制图像轮廓的最佳实践
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绘制图像轮廓的最佳实践相关的知识，希望对你有一定的参考价值。
我已经尝试了3种方法来制作它，但效果并不好看。
- 复制并填充图像然后进行偏移。演示是
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
function draw() {
var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
s = 20, // thickness scale
i = 0, // iterator
x = 5, // final position
y = 5;
// draw images at offsets from the array scaled by s
for(; i < dArr.length; i += 2)
ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "red";
ctx.fillRect(0,0,canvas.width, canvas.height);
// draw original image in normal mode
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(img, x, y);
}<canvas id=canvas width=500 height=500></canvas>- 根据Marching Squares算法检查图像边缘。当图像形状为圆形时，轮廓为锯齿形。如果使轮廓更平滑，它将不适合像星星那样的尖锐形状。
- 复制并填充图像然后缩放它。当图像宽度与高度不相等时，它不起作用。
答案
您可以尝试使用数学方法，而不使用偏移数组
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
function draw() {
var s = 20, // thickness scale
x = 5, // final position
y = 5;
for (i=0; i < 360; i++)
ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s);
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// draw original image in normal mode
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(img, x, y);
}<canvas id=canvas width=500 height=500></canvas>以上是关于绘制图像轮廓的最佳实践的主要内容，如果未能解决你的问题，请参考以下文章
youcans 的 OpenCV 例程200篇195.绘制图像轮廓（cv.drawContours）