1

描画中にカーソルで線を引く必要があります。mousemoveイベントを試しましたが、機能しませんでした。以下は私が現在持っているものです。

http://jsfiddle.net/m1erickson/qwd2a/

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var canvasMouseX;
        var canvasMouseY;
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var storedLines = [];

        ctx.strokeStyle = "orange";
        ctx.font = '12px Arial';

        $("#canvas").mousedown(function (e) {
            handleMouseDown(e);
        });

        function handleMouseDown(e) {
            canvasMouseX = parseInt(e.clientX - offsetX);
            canvasMouseY = parseInt(e.clientY - offsetY);

            // Put your mousedown stuff here
            storedLines.push({
                x: canvasMouseX,
                y: canvasMouseY
            });
            var count = storedLines.length;
            var X = canvasMouseX - (count < 10 ? 4 : 7);
            ctx.strokeStyle = "orange";
            ctx.fillStyle = "black";
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.arc(canvasMouseX, canvasMouseY, 8, 0, 2 * Math.PI, false);
            ctx.fillText(storedLines.length, X, canvasMouseY + 4);
            ctx.stroke();
        }

        $("#draw").click(function () {
            ctx.strokeStyle = "red";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 3;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(storedLines[0].x, storedLines[0].y);
            for (var i = 0; i < storedLines.length; i++) {
                ctx.lineTo(storedLines[i].x, storedLines[i].y);
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            storedLines = [];
        });

        $("#clear").click(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            storedLines = [];
        });
4

2 に答える 2

2

キャンバスを使用すると、必要になるたびにコンテンツ全体を再描画する必要があります。つまり、マウスカーソルが移動したら、キャンバスをクリアしてから、現在のすべての線分を再描画する必要があります。あなたのコードに基づいて、私はそれをどのように行うことができるかについて次のサンプルを考え出しました：

<html>
<head>
    <title>Canvas</title>
</head>
<body>

<p>Click to draw lines</p>
<p>Click back in the green circle to close+fill</p>
<br/>
<canvas id="canvas" width=300 height=300></canvas>
<br/>
<button id="clear">Clear Canvas</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
            offset = $("#canvas").offset(),
            storedLines = [],
            polyLines = [],
            start = {x: 0, y: 0},
            radius = 7;

        function canvasPosition(e) {
            return {
                x: parseInt(e.clientX - offset.left),
                y: parseInt(e.clientY - offset.top)
            };
        }

        $("#canvas").mousedown(function (e) {
            var pos = canvasPosition(e);
            if (hitStartCircle(pos)) {
                polyLines.push(storedLines);
                storedLines = [];
                draw();
            }
            else
            {
                storedLines.push(pos);
                update(pos);
            }
        })
        .mousemove(function (e) {
            update(canvasPosition(e));
        });

        // Draw completed polylines
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            $.each(polyLines, function (idx, polyLine) {
                fillPolyline(polyLine);
            });
        }

        // Update shape currently being drawn
        function update(position) {
            var len = storedLines.length;
            if(len==0) return;

            draw();
            ctx.fillStyle = "green";
            ctx.beginPath();
            ctx.arc(storedLines[0].x, storedLines[0].y, radius, 0, 2 * Math.PI, false);
            ctx.fill();

            ctx.strokeStyle = "orange";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(storedLines[0].x, storedLines[0].y);
            for(var i=1; i<len; ++i) {
                ctx.lineTo(storedLines[i].x, storedLines[i].y)
            }
            ctx.lineTo(position.x, position.y);
            ctx.stroke();
        };

        function hitStartCircle(pos) {
            var start = storedLines[0] || {x:0, y:0},
                dx = pos.x - start.x,
                dy = pos.y - start.y;
            return (dx * dx + dy * dy < radius * radius)
        }

        function fillPolyline(lines) {
            ctx.strokeStyle = "red";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(lines[0].x, lines[0].y);
            for (var i = 0; i < lines.length; i++) {
                ctx.lineTo(lines[i].x, lines[i].y);
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        $("#clear").click(function () {
            polyLines = [];
            draw();
        });
});
</script>
</body>
</html>

これにより、ユーザーがマウスカーソルを移動すると、最後のセグメントが正しく更新されます。

于 2013-03-24T14:13:52.377 に答える
0

jsfiddleを見ると、新しい線を引くときにオフセットがあります。これは、CSSの本体のパディングが原因で発生しています。

これを置き換えるだけです：

body {
    background-color: ivory;
    padding:10px;
}

これとともに：

body {
    background-color: ivory;
}
于 2013-03-24T14:08:54.093 に答える