0

我想在鼠标点击时绘制一条多线（我的意思是一些连续的线与前一行共享一个坐标，与下一行共享一个坐标）。我目前通过mousemovejQuery 中的事件实现了这一点：

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();

    })

})​

但正如我可以在这个例子中向你展示的那样，当我移动鼠标光标时，它会留下一连串线条，我需要以某种方式删除这些线条，以创建一条需要定义另一个点的可移动线条的印象。我试图清除不需要的行，但 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

我想你会想要使用两个堆叠的画布。顶层将有动态线（因此可以在每次鼠标移动时 clearRect 整个东西），然后单击，您在下部画布上描边

于 2012-07-10T16:24:55.640 回答