javascript - 使用单选按钮绘图

Question

我是 Javascript 的初学者。我尝试用一​​些单选按钮绘制形状。但是，按钮不起作用。当我绘制每一个时，它就起作用了。我需要在这里做什么？

<h2>Painting Editor</h2>

<br />

<div align="center">
<label>Line <input type="radio" name="Shape" value="Line" id="Line" checked /> </label>
<label>Rectangle <input type="radio" name="Shape" value="Rectangle" id="Rectangle" /> </label>
<label>Circle <input type="radio" name="Shape" value="Circle" id="Circle" /> </label>

上面的部分是分配单选按钮。

<br />

<div id="sketch">
<canvas id="paint" width="700" height="700"></canvas>
</div>

<script>
    (function () {
    var canvas = document.querySelector('#paint');
    var context = canvas.getContext('2d');

    var sketch = document.querySelector('#sketch');
    var sketch_style = getComputedStyle(sketch);

    // Pase into integer of Canvas size
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));


    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_context = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    // Mouse Position Setting
    var mouse = { x: 0, y: 0 };
    var last_mouse = { x: 0, y: 0 };

    /* Drawing on Paint*/
    tmp_context.lineWidth = 4;
    tmp_context.lineJoin = 'round';
    tmp_context.lineCap = 'round';
    tmp_context.strokeStyle = 'Red';
    tmp_context.fillStyle = 'Red';


    var shape = '';

    document.querySelector('#Line').onchange() = function () {
        if (this.checked)
            shape = 'Line';

        tmp_canvas.style.display = 'block';
    }

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function (e) {
        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
    });

    tmp_canvas.addEventListener('mousedown', function (e) {
        tmp_canvas.addEventListener('mousemove', onLine);

        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;

        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        onLine();
    });

    tmp_canvas.addEventListener('mouseup', function () {
        tmp_canvas.removeEventListener('mousemove', onLine);

        // Writing down to real canvas now
        context.drawImage(tmp_canvas, 0, 0);

        // Clearing tmp canvas
        tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
    });

    var onLine = function () {

        // Tmp canvas is always cleared up before drawing.
        tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        // Line
        tmp_context.beginPath();
        tmp_context.moveTo(last_mouse.x, last_mouse.y);
        tmp_context.lineTo(mouse.x, mouse.y);
        tmp_context.stroke();
        tmp_context.closePath();
    };

    document.querySelector('#Rectangle').onchange() = function () {
        if (this.checked)
            shape = 'Rectangle';

        tmp_canvas.style.display = 'block';
    }

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function (e) {
        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
    });

    tmp_canvas.addEventListener('mousedown', function (e) {
        tmp_canvas.addEventListener('mousemove', onRect);

        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;

        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        onRect();
    });

    tmp_canvas.addEventListener('mouseup', function () {
        tmp_canvas.removeEventListener('mousemove', onRect);

        // Writing down to real canvas now
        context.drawImage(tmp_canvas, 0, 0);

        // Clearing tmp canvas
        tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
    });

    var onRect = function () {
        // Rectangle
        var x = Math.min(mouse.x, last_mouse.x);
        var y = Math.min(mouse.y, last_mouse.y);
        var width = Math.abs(mouse.x - last_mouse.x);
        var height = Math.abs(mouse.y - last_mouse.y);
        tmp_context.strokeRect(x, y, width, height);
    };


    document.querySelector('#Circle').onchange() = function () {
        if (this.checked)
            shape = 'Circle';

        tmp_canvas.style.display = 'block';
    }

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function (e) {
        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
    });

    tmp_canvas.addEventListener('mousedown', function (e) {
        tmp_canvas.addEventListener('mousemove', onCircle);

        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;

        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        onCircle();
    });

    tmp_canvas.addEventListener('mouseup', function () {
        tmp_canvas.removeEventListener('mousemove', onCircle);

        // Writing down to real canvas now
        context.drawImage(tmp_canvas, 0, 0);

        // Clearing tmp canvas
        tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
    });

    var onCircle = function () {
        // Circle
        var x = (mouse.x + last_mouse.x) / 2;
        var y = (mouse.y + last_mouse.y) / 2;

        var radius = Math.max(Math.abs(mouse.x - last_mouse.x), Math.abs(mouse.y - last_mouse.y)) / 2;

        var sAngle = 0;
        var eAngle = 2 * Math.PI;

        tmp_context.beginPath();
        tmp_context.arc(x, y, radius, sAngle, eAngle);
        tmp_context.stroke();
        tmp_context.closePath();
    };
}());
</script>

创建了临时 Canvas ，并绘制了每个圆形、矩形和线条。如果我单独制作，那么它就会像我说的那样工作。我想将它们与单选按钮结合起来，但它不起作用。

例如。如果我单击线条单选按钮，则仅绘制线条。等等...

Answer 1

这些行的 onchange 之后有额外的括号

document.querySelector('#Line').onchange() = function () {

document.querySelector('#Rectangle').onchange() = function () {

document.querySelector('#Circle').onchange() = function () {

应该是

document.querySelector('#Line').onchange = function () {

这个测试似乎在没有括号的情况下效果更好:http://jsfiddle.net/rrb1xxjs/

<小时/>

您可以在 mouseup 和 mousedown 上绑定(bind)一组函数，调用一个函数来检查 shape 的值并调用请求的绘图功能:

function draw() {
    // Tmp canvas is always cleared up before drawing.
    tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    switch(shape) {
        case 'Line': onLine(); break;
        case 'Rectangle': onRect(); break;
        case 'Circle': onCircle(); break;
    }
}

此外，由于默认选择“Line”单选按钮，因此应相应地初始化 shape 变量

var shape = 'Line';

Example here

这可能不是执行此操作的总体最佳方法，但我认为这是最适合您现有代码的方法。