0

マウスクリックで複数の線（前の線と1つの座標を共有し、次の線と1つの座標を共有するいくつかの連続した線を意味します）を描画したいと思います。mousemove私は現在、jQueryのイベントを通じてこれを達成しています：

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");

var mouse = {
     x: -1,
     y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.beginPath();
    context.moveTo(mouse.x, mouse.y);

    $(this).mousemove(function(k) {

        context.strokeStyle = "rgb(180,800,95)";

        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.closePath();
        context.stroke();

    })

})​

しかし、この例で示すことができるように、マウスカーソルを移動すると、線の跡が残ります。これを削除して、別の点を定義する必要がある1本の可動線の印象を作成する必要があります。不要な行をクリアしようとしましたが、2DコンテキストにはclearRect()メソッドしかありませんが、のようなものを探していclearPath()ます。

4

2 に答える 2

4

キャンバスリファレンスclearPathによる方法はありません

ただし、とにかくそれは必要ありません。私の仮定が正しければ、あなたがする必要があるのは、前のストロークの値を配列に格納することだけです。

ここでjsfiddleを作成したので、それが機能していることを確認して、遊んでみることができます。

すべての動きでキャンバスをクリアすることは非常に効果的であり、パフォーマンスの問題はありません。

説明付きのソースコード

$(function() {

var worksheetCanvas = $('#worksheet-canvas');

var context = worksheetCanvas.get(0).getContext("2d");
var clicked = false;

// maximum number of consecutive lines to be drawn
var maxLines = 5;

// The array of stored lines
var storedLines = [];

// The object for the last stored line
var storedLine = {};
var mouse = {
    x: -1,
    y: -1
}

var parentOffset = $('#canvas-holder').parent().offset();
worksheetCanvas.click(function(e) {
    clicked = true;

    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;

    context.moveTo(mouse.x, mouse.y);

    // Push last line to the stored lines

    if (clicked) {
        storedLines.push({
            startX: storedLine.startX,
            startY: storedLine.startY,
            endX: mouse.x,
            endY: mouse.y
        });

    }

    // set last line coordinates

    storedLine.startX = mouse.x;
    storedLine.startY = mouse.y;

    $(this).mousemove(function(k) {
        if (storedLines.length > maxLines) {
            storedLines.shift();
        }

        // clear the canvas

        context.clearRect(0, 0, 960, 500);
        context.beginPath();
        context.strokeStyle = "rgb(180,800,95)";

        // draw the stored lines

        for (var i = 0; i < storedLines.length; i++) {
            var v = storedLines[i];
            context.moveTo(v.startX, v.startY);
            context.lineTo(v.endX, v.endY);
            context.stroke();
        }
        context.moveTo(mouse.x, mouse.y);
        context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
        context.stroke();

        context.closePath();


    })

})

})​
于 2012-07-10T16:42:30.593 に答える
1

2枚の積み重ねられた帆布を使いたいと思います。最上層には動的な線があり（したがって、各マウスの動きですべてをクリアすることができます）、クリックすると、下のキャンバスにストロークします

于 2012-07-10T16:24:55.640 に答える