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轴上的每个像素都将被设置为红色（255）。大于180，这是对角线应该开始的地方。

一旦满足初始条件，我就编写程序来绘制每个像素setRed（），如果它的x坐标。因为20个像素是对角线应该在每个Y坐标的像素处开始的位置，所以大于最初设置为20的变量xPos。大于180。

由于我试图绘制像素以实现红色对角线，该红色对角线终止于图像的左下角，然后转换为黑色，然后我继续从全局xPos变量中减去1，以便在下一次迭代中在for循环中，它将图像红色再向左绘制一个像素。

出于某种原因，我的变量似乎没有在for循环调用时注册，主要是xPos，我觉得我理解我必须要创建这个算法的过程，但我可以让它工作。< / p>

如何在javascript中创建一个程序/脚本，以帮助从图像的左下角开始绘制对角线。

谢谢！

Answer 1

解决问题的关键是认识到你基本上有3个需要计算的函数。

第一个处理顶部的对角线部分，第二个处理顶部诊断和底部之间的矩形，而第三个函数负责底部对角线。

对于第一个函数，您只想在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 个答案: