0

JCanvas.Hre のマウス イベントを使用して、キャンバス上に線と四角形を描画しようとしています。

   <!DOCTYPE html>
   <html>
      <head>
          <script type="text/javascript" src="http://code.jquery.com/jquery-  1.10.2.min.js"></script>
          <script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
    </head>
    <body>
         <div id="tools">&nbsp; &nbsp;
            <button id = "rectangle" type = "button"title="Rectangle"style="border:0;padding:0;">
                <img src="rect.jpg" width="40" height="30"/>
            </button>
            <button id = "line" type="button" title="Line" style="border:0;padding:0;">
                <img src="line.jpg" width="40" height="30" />
            </button>
        </div>
        <div id="sketch">
            <canvas id="paint">
            </canvas>
        </div>
        <script>
            var tool = ' ';
    $('#tools button').on('click', function()
    {
        tool = $(this).attr('id');
        console.log(tool);
    });
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
    var sketch = document.getElementById('sketch');
    var sketch_style = getComputedStyle(sketch);
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));
    var isText = false;
    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_ctx = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;
    sketch.appendChild(tmp_canvas);
    var mouse = {x: 0, y: 0};
    var start_mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};
    if ( tool == 'line')
    {
        $('canvas').draw({
            $('#line').click(function () 
            {
                mousemove: function (e)
                {
                    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
                },
                mousedown: function (e)
                {
                    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
                    start_mouse.x = mouse.x;
                    start_mouse.y = mouse.y;
                    canvas.addEventListener('mousemove',onLinePaint,false);
                    onLinePaint();
                },
                mouseup: function ()
                {
                    canvas.removeEventListener('mousemove',onLinePaint,false);
                    ctx.drawImage(canvas,0,0);
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                }
            });
        });
    }
    if (tool == 'rectangle')
    {

        $('canvas').draw({
            $('#rectangle').click(function () 
            {
                mousemove: function (e)
                {
                    mouse.x = typeof e.offsetX !== 'undefined' ?   e.offsetX : e.layerX;
                    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
                },
                mousedown: function (e)
                {
                    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
                    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
                    start_mouse.x = mouse.x;
                    start_mouse.y = mouse.y;
                    canvas.addEventListener('mousemove',onRectPaint,false);
                    onRectPaint();
                },
                mouseup: function ()
                {
                    canvas.removeEventListener('mousemove',onRectPaint,false);
                    ctx.drawImage(canvas,0,0);
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                }
            });
        });
    }
    var onLinePaint = function ()
    {
        // Tmp canvas is always cleared up before drawing.
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(start_mouse.x, start_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
        ctx.closePath();
    };
    var onRectPaint = function()
    {
        // Tmp canvas is always cleared up before drawing.
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var x = Math.min(mouse.x, start_mouse.x);
        var y = Math.min(mouse.y, start_mouse.y);
        var width = Math.abs(mouse.x - start_mouse.x);
        var height = Math.abs(mouse.y - start_mouse.y);
        ctx.strokeRect(x, y, width, height);
    };
        </script>
    </body>
</html>

しかし、期待される出力が得られません。上記のコードで何を間違えたのか教えてください。前もって感謝します。

4

1 に答える 1