Question

我目前正在研究HTML和js中的项目，其中我有一个简单的画布和两个文本字段（x和y）以及一个名为＆＃34; Draw＆＃34;的按钮。

尝试让它通过用户输入一条线来输入x和y用onclick拦截到画布上。

我用onclick调用的函数是generateImage（）。

我可以说文本字段实际上是在接收用户信息。我通过使用window.alert来测试这个以显示弹出信息（我现在已将其注释掉）。

起初我认为这与我如何设置我的按钮有关，但在询问后我认为这不可能是真的：

<button type="button" onclick="generateImage()"> DRAW LINE!</button>

我在控制台上没有更多错误。

我甚至让我的教授看着它，他说它看起来还不错。我开始认为这是程序中其他地方的问题。我确信我要么a）愚蠢/沮丧，要么b）认真看待某事。

以下是我的一些代码。

最后一件事。 var x0 = ...和var y0 = ...我知道我会得到一个零斜率和一个零长度的线，因为它们是相同的。

我的教授告诉我们使用这个算法，即使它对我来说也没有意义。我想提一下，我还尝试对x和y值进行硬编码，但仍然不起作用。

由于

HTML

<body>
    <form action="demo_form.asp">
        X = <input name="X Value" type="text" id="Xvalue"><br>
        Y = <input name="Y Value" type="text" id="Yvalue"><br>
    </form> 
    <button type="button" onclick="generateImage()"> DRAW LINE!</button>
    <p>Click "DRAW LINE" button to draw the line with custom X and Y coords</p>
<canvas id="gl-canvas" width="512", height="512">
<pre>No Support... :(</pre>
</canvas>

</body>


***JS***

function generateImage()
{

        var x0 = document.getElementById('Xvalue').value;
        var y0 = document.getElementById('Yvalue').value;
        var x1 = document.getElementById('Xvalue').value;
        var y1 = document.getElementById('Yvalue').value;
    //  window.alert(x0);
    //  window.alert(y0);


        var slope = (y1-y0)/(x1-x0);

        for (var i=0; i<x1-x0; i++){

            var y = (slope*i)+y0;
            var x = x0 + i;

            myImage.setPixel(x,y, RED);
        }

}

function glInit(canvas)     
{
    //makes our GL instance
    gl=WebGLUtils.setupWebGL(canvas);
    //gets and initializes our vertex and fragment shaders
    program = initShaders(gl, "vertex-shader", "fragment-shader");
    //sets the resulting shader program to use
    gl.useProgram(program);
}

window.onload=function init()
{

    var canvas = document.getElementById("gl-canvas");


    glInit(canvas);

    myImage=new Image(canvas);


    myImage.setImageSize(700, 350);
    myImage.clearImage();


    generateImage(myImage);

    renderImage(myImage);   

}

function renderImage(myImage)
{
    points=[]; 
    colors=[]; 

    for (var i=0; i<pixels.length; i++)
    {
        var y=Math.floor(i/myImage.width);
        var x=i-(y*myImage.width);

        colors.push(myImage.getPixel(x, y));

        x/=myImage.width/2;
        y/=myImage.height/2;

        x-=1.0;
        y-=1.0;


        points.push(vec3(x, y, 0.0, 0.0));
    }

    gl.clearColor(0.7, 0.7, 0.7, 1.0);
    gl.viewport(0, 0, myImage.width, myImage.height);

    var posBufferID=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBufferID);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);


    program.vPositionA=gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(program.vPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(program.vPositionA);


    var colBufferID=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colBufferID);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);


    program.vColorA=gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(program.vColorA, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(program.vColorA);


    render(program, colBufferID, posBufferID);
}

function render(program, colBufferID, posBufferID)    
{
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.bindBuffer(gl.ARRAY_BUFFER, colBufferID);
    gl.vertexAttribPointer(program.vColorA, 4, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, posBufferID);
    gl.vertexAttribPointer(program.vPositionA, 3, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.POINTS, 0, points.length);
}

使用文本字段中的用户输入在HTML5 / JS webGL中绘制线条

0 个答案: