Javascript Canvas + Convolution Matrix。条件总是如此

时间:2015-07-24 03:32:58

标签: javascript if-statement canvas conditional-statements convolution

所以,我正在尝试将卷积矩阵应用于画布上的图像。

对于那些不知道如何处理画布上图像数据的人来说,它是通过大量8位整数处理的。每个像素通过数组中的4个值表示 - 红色,绿色,蓝色和alpha。这就是为什么你可能会在代码中看到一个随机的抛出。

无论如何,我的主要问题是有条件的:

if ((i+x*4) % dY == i%dY)

其中:

i ==中心像素的红色值的位置,

x ==要为矩阵选择的像素位移

dY ==新像素行中数组值的数量

条件总是在此上下文中返回true,但我希望它只有在x超出图像的左/右边缘时才为真。

这是上下文的整个功能。

this.fire = function(imageData, value) {
    /*  function fire
            Applies this filter to the image.
        var imageData       an ImageData object that the filter is being applied.
        var value           the distance of the center to the edges of the matrix.
    */

    //Don't edit the data directly.
    var data = imageData.data.slice(0);

    //Used for sampling the image to avoid pixels already filtered.
    var pseudoData = data.slice(0);

    //The length of one row
    var dY = imageData.width * 4;

    //Distance from center to edges.
    var bigness = parseInt(value);

    //Generate a convolution matrix.
    var matrix = this.getMatrix(bigness*2+1);
    for (var i = 0; i < data.length; i+=4) {

        //Sum of the RGB channels that will later be applied to the pixel.
        var RGBSum = [0,0,0];

        //Sums all pixels in the matrix.
        for (var y = -1 * bigness; y <= bigness; y++) {

            //Select how many rows up
            var location = i + y * dY;

            //If out of bounds of the array, select the original row.
            if (location < 0||location >= data.length) {
                location = i;
            }
            for (var x = -1 * bigness; x <= bigness; x++) {

                //If adding x pixels doesn't change a row, shift the column selected.
                //Always firing true for some reason.
                if ((i+x*4) % dY == i%dY) {
                    //
                    //Testing to see which pixels are affected
                    //
                    data[i] = 255;
                    data[i+1] = 0;
                    data[i+2] = 0;
                    //
                    location += 4*x;
                }
                var matFact = matrix[y+bigness][x+bigness];
                RGBSum[0] += matFact * pseudoData[location];
                RGBSum[1] += matFact * pseudoData[location+1];
                RGBSum[2] += matFact * pseudoData[location+2];

            }
        }
        //Apply the RGB to the actual pixel
    }
    return data;
}

1 个答案:

答案 0 :(得分:0)

我不太清楚你在追求什么,但是这里是如何确定你正在检查哪一行。

row

如果parseInt(i/cw4) !== parseInt((i+x)/cw4)发生变化,那么您正在检查另一行。

所以,// swipeMenuPane is builded in SceneBuilder and it is hidden, // opacity = 0.0 and setX() = -getPrefWidth(); @FXML AnchorPane swipeMenuPane; @FXML Button menuButton; menuButton.setOnMouseClicked(e-> { swipeMenuPane.setOpacity(1.0); swipeTransition.play() }); TranslateTransition swipeTransition = new TranslateTransition(); swipeTransition.setNode(swipeMenuPane); swipeTransition.setDuration(Duration.millis(500)); swipeTransition.setToX(swipeMenuPane.getPrefWidth()); 当你向前或向右延伸当前“基于i”的行时。