如何使用Javascript在特定區域的對角線上設置圖像上的像素？

Question

我正在嘗試制作此圖像：

看起來像這個圖像：

我在獲取左下角的紅色對角線時遇到問題。

這是我的代碼：

var img = new SimpleImage(200,200);
var w = img.getWidth();
var xPos = 20;

for(var p of img.values())
{
    //set canvas to red
    p.setRed(255);

    if(p.getX() <= w/10 && p.getY() <= w/1)
    {
        //set 20px border along left side of img to black
        p.setRed(0);

        //set top diag corner
        if(p.getX() >= (p.getY() + 1))
        {
            p.setRed(255);
        }
    }

    //Problem is here  
    if(p.getY() >= 180)
    {
        if(p.getX() >= xPos)
        {
            p.setRed(85);
        }
    }

    xPos--;
}

print(img);

我的問題是我最后一個條件下的 xPos 變量似乎沒有從 var 聲明中讀取值。 當我將它設置為硬編碼數字時，它會以想要的方式做出反應。

紅色的底部陰影是我正在努力可視化底部對角線的創建。

我對我為了好玩而編寫這段特定代碼的方向感到困惑，因為腳本的執行沒有按預期進行。

我想要做的是圖像 Y 軸上的每個像素，從上到下測量，如果它的 Y 坐標是 setRed(255)。 大於 180，這是對角線的起點。

一旦滿足初始條件，我就會編寫程序來繪制每個像素 setRed()，如果它的 x 坐標。 大於最初設置為 20 的變量 xPos，因為 20 像素是對角線應該從 Y 坐標的每個像素開始的地方。 大於 180。

由於我試圖繪制像素以實現終止於圖像左下角的紅色對角線，在那里它過渡到黑色，然后我繼續從 Global xPos 變量中減去 1，以便在 for 的下一次迭代中循環將圖像向左再繪制紅色一個像素。

出於某種原因，我的變量在被 for 循環調用時似乎沒有注冊，主要是 xPos，我覺得我理解創建這個算法必須經歷的過程，但我可以讓它工作。

如何在 javascript 中創建一個程序/腳本，以幫助從圖像的左下角開始繪制對角線。

謝謝！

Answer 1

解決問題的關鍵是認識到您基本上有 3 個需要計算的函數。

第一個處理頂部的對角線部分，第二個處理頂部 diag 和底部之間的矩形，而第三個函數負責底部對角線。

對於第一個函數，如果 X 坐標小於或等於 Y 坐標，您只想繪制一個像素。
對於第二個功能，您只需填寫即可。
對於第三個函數，您只想在 X 坐標小於圖像高度與當前 Y 坐標之間的差值時進行填充。

這是一個香草 JS 解決方案：

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}

window.addEventListener('load', onDocLoaded, false);

var imgData;

function onDocLoaded()
{
    var can = byId('tgt');
    var ctx = can.getContext('2d');

    imgData = ctx.getImageData(0,0,can.width,can.height);
    doTest();
    updateCan();
}

function setPixel(x,y, r,g,b, imgData)
{
    var index = ((imgData.width * y) + x) * 4;
    imgData.data[index] = r;
    imgData.data[index+1] = g;
    imgData.data[index+2] = b;
    imgData.data[index+3] = 255;   // alpha value
}

function updateCan()
{
    var can = byId('tgt');
    can.getContext('2d').putImageData(imgData,0,0);
}

function doTest()
{
    var margin = 32;
    var x, y;

    for (y=0; y<imgData.height; y++)
    {
        for (x=0; x<margin; x++)
        {
            // function 1 - top diag
            if (y < margin)
            {
                if (x < y)
                    setPixel(x,y, 255,0,0, imgData);
            }

            // function 2 - middle rect
            else if ((y >= margin) && (y < imgData.height-margin))
                setPixel(x,y, 0,255,0, imgData);

            // function 3 - bottom diag
            else 
            {
                var tmpY = imgData.height - y;
                if (x < tmpY)
                    setPixel(x,y, 0,0,255, imgData);
            }
        }
    }
}
</script>
<style>
canvas
{
    border: solid 1px black;
}
</style>
</head>
<body>
    <canvas id='tgt' width='256' height='256'></canvas>
</body>
</html>

如何使用Javascript在特定區域的對角線上設置圖像上的像素？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-03-29 03:06:48

如何使用Javascript在特定區域的對角線上設置圖像上的像素？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-03-29 03:06:48

解決方案1
1 已采納 2016-03-29 03:06:48