Question

我正在上课，我们应该创建一个为图像添加边框的功能。我首先制作了一个程序（在此代码的底部注释掉），在图像周围创建了一个十个像素的边框，这正如我预期的那样工作。我将代码转移到函数中，现在它有一个bug。我用函数addBorder中的参数（borderWidth）替换了10，由于某种原因，该函数只将边框放在图像的顶部和左侧，而不是一直放置。我假设bug在if语句中，但是我找不到它，也不理解为什么它作为一个程序工作，而不是作为一个函数。

//create a function to change a single pixel to black
function setBlack(pixel){
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(0);
    return false;
}
//create a function to add a black border around an image 

function addBorder(pixel, image, borderWidth){
    var x = pixel.getX();
    var y = pixel.getY();
    if(x <= img.getWidth() + borderWidth - img.getWidth() || x >= img.getWidth - borderWidth){
        return pixel;
    }
    if(y <= img.getHeight() + borderWidth - img.getHeight() || y >= img.getHeight - borderWidth){
        return pixel;
    }
    return false;
}

var img = new SimpleImage("palm-and-beach.png");
img.setSize(200, 200);

for(pixel of img.values()){
    if(addBorder(pixel, img, 10)){
        setBlack(pixel);
    }
}
print(img);

Answer 1

根据您的代码判断，您似乎正在通过＆＃34; img＆＃34;添加订单：

if(addBorder(pixel, img, 10)){
        setBlack(pixel);
    }

但是你的函数中的参数是＆＃34; image＆＃34;你正在修改函数中的img：

function addBorder(pixel, image, borderWidth){
    ...
    if(x <= img.getWidth() + borderWidth - img.getWidth())
    ...
    }

我认为它应该是if(x <= image.getWidth() + borderWidth - image.getWidth())

Answer 2

您忘记在函数referance img.getWidth()

之后放置（）

function addBorder(pixel, image, borderWidth){
    //                     ^^
    // should be referencing image        
    var x = pixel.getX();
    var y = pixel.getY();
    if(x <= img.getWidth() + borderWidth - img.getWidth() || x >= img.getWidth  - borderWidth){
    //                                                                    ^^ 
    //                                                            This is a function call missing ()
        return pixel;
    }
    if(y <= img.getHeight() + borderWidth - img.getHeight() || y >= img.getHeight - borderWidth){
    //                                                                          ^^ 
    //                                                            This is a function call missing ()

        return pixel;
    }
    return false;
}

同样img.getWidth() + borderWidth - img.getWidth()是多余的borderWidth您需要的高度相同。当超过边框像素时，也应该返回true而不是pixel。

纠正功能。

function addBorder(pixel, image, borderWidth){
    var x = pixel.getX();
    var y = pixel.getY();
    var w = image.getWidth();
    var h = image.getHeight();
    if(x <= borderWidth || x >= w  - borderWidth){
        return true;
    }
    if(y <= borderWidth || y >= h - borderWidth){
        return true;
    }
    return false;
}

您正在进行练习但是要告诉您有更快（CPU时间）的方式来添加边框

function addBorder(image, borderStyle, borderWidth){
     // create new image
     var bImage = document.createElement("canvas");
     // set size to include border
     bImage.width = image.width + borderWidth * 2;
     bImage.height = image.height + borderWidth * 2;
     var ctx = bImage.getContext("2d");
     ctx.fillStyle = borderStyle;
     // fill it with border colour
     ctx.fillRect(0, 0, bImage.width, bImage.height);
     // draw the image 
     ctx.drawImage(image, borderWidth, borderWidth);
     return bImage; // done
 }

创建一个功能，在图像周围添加黑色边框

2 个答案: