假设我有一个这样的图像:
每个正方形都是一个像素。它们是白色或红色。
我要在给定轮廓宽度 w 的红色区域周围绘制绿色轮廓。
我尝试了一些算法,但结果效果不佳,对角线看起来很奇怪,无法反映原始图像:
我应该使用哪种方法来获得更平滑,更好的结果以及更好的性能?
为简单起见,假设我有一个属于边界的点 p 。
答案 0 :(得分:5)
以下是使用JavaScript的解决方案:
var matrix=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
function createMatrixDivs() {
for(var r=0; r<16; r++) {
for(var c=0; c<16; c++) {
var cell=document.createElement("div");
cell.style="border:1px solid blue;position:absolute;width:10px;height:10px;left:"+10*c+"px;top:"+10*r+"px;";
cell.id=r+","+c;
document.body.append(cell);
}
}
}
function drawMatrixDivs() {
for(var r=0; r<16; r++) {
for(var c=0; c<16; c++) {
document.getElementById(r+","+c).style.backgroundColor=(matrix[r][c]==0?"white":matrix[r][c]==1?"red":matrix[r][c]==2?"green":"gray");
}
}
}
function outline(w) {
for(var r1=0; r1<16; r1++) {
for(var c1=0; c1<16; c1++) {
if(matrix[r1][c1]==0) {
for(var r2=0; r2<16; r2++) {
for(var c2=0; c2<16; c2++) {
if(r2!=r1 && c2!=c1 && matrix[r2][c2]==1 && Math.round(Math.sqrt(Math.pow(r2-r1,2)+Math.pow(c2-c1,2)))<=w) {
matrix[r1][c1]=2;
}
}
}
}
}
}
drawMatrixDivs();
}
createMatrixDivs();
drawMatrixDivs();
outline(+prompt("Enter outline width: "));
答案 1 :(得分:4)
您的绿色轮廓线显示的像素距红色像素的像素距w =像素,以曼哈顿距离测得。
您想要使用欧几里德距离测量的与红色像素相距<= w像素的像素。
这有点棘手,但实际上您可以在线性(O(width * height))时间中完成此操作。
PASS1:创建一个新矩阵M [y] [x]给出从(x,y)到红色像素的垂直距离,如果距离大于w,则为w + 1。您可以通过上下扫描各列来在线性时间内完成此操作。
PASS2:在每一行中从左向右扫描。在M [y] [x] <= w的情况下,您可以将像素(x,y)与sqrt(w 2 -M [y] [x] 2 < / sup>)。请记住您已着色的最右端,并避免对已经完成的像素重新着色,因此此过程也将花费线性时间。从右向左扫描相同的内容。
制作一个sqrt(w 2 -M [y] [x] 2 )查找表,以避免一直计算该表。
由于@iAmOren足以提供可运行的JS,因此我将公然复制并修复它以使用更快的算法:
var matrix=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
function createMatrixDivs() {
for(var r=0; r<16; r++) {
for(var c=0; c<16; c++) {
var cell=document.createElement("div");
cell.style="border:1px solid blue;position:absolute;width:10px;height:10px;left:"+10*c+"px;top:"+10*r+"px;";
cell.id=r+","+c;
document.body.append(cell);
}
}
}
function drawMatrixDivs() {
for(var r=0; r<16; r++) {
for(var c=0; c<16; c++) {
document.getElementById(r+","+c).style.backgroundColor=(matrix[r][c]==0?"white":matrix[r][c]==1?"red":matrix[r][c]==2?"green":"gray");
}
}
}
function outline(w) {
var M = matrix.map(function(row) {
return row.slice();
});
var x,y,d,i,s,e;
//PASS 1 - put vertical distances in M
for(x=0; x<16; x++) {
d=w+1;
for(y=0; y<16; y++) {
if (matrix[y][x]==1) {
d=0;
} else if (d<=w) {
++d;
}
M[y][x]=d;
}
d=w+1;
for(y=15; y>=0; y--) {
if (matrix[y][x]==1) {
d=0;
} else if (d<=w) {
++d;
}
if (M[y][x] > d) {
M[y][x] = d;
}
}
}
// Precalculate vertical distance -> horizontal span
var spans=[];
for (i=0; i<=w; ++i) {
spans[i] = Math.sqrt((w+0.3)*(w+0.3) - i*i)|0;
}
// PASS 2 fill every pixel within w
for(y=0; y<16; y++) {
e=-1;
for (x=0; x<16; ++x) {
d = M[y][x];
if (d<=w) {
s=Math.max(x,e);
e=Math.max(e,x+spans[d]);
for(; s<=e && s<16; ++s) {
matrix[y][s] = matrix[y][s]||2;
}
}
}
e=17;
for (x=15; x>=0; --x) {
d = M[y][x];
if (d<=w) {
s=Math.min(x,e);
e=Math.min(e,x-spans[d]);
for(; s>=e && s>0; --s) {
matrix[y][s] = matrix[y][s]||2;
}
}
}
}
drawMatrixDivs();
}
createMatrixDivs();
drawMatrixDivs();
outline(+prompt("Enter outline width: "));