我希望在鼠标点击时绘制一条多线(我的意思是一些连续的线与前一条线共用一条坐标,一条与下一条线共用)。我目前通过jQuery中的mousemove
事件实现了这一点:
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();
})
})
但正如我可以在this example中向您展示的那样,当我移动鼠标光标时,它会留下一条线条,我需要删除它以创建一条可移动线条的印象,这需要另一个点被定义。我试图清除不需要的行,但是2d上下文只有clearRect()
方法,而我正在寻找像clearPath()
这样的东西。
答案 0 :(得分:4)
clearPath
方法
但是,无论如何你都不需要它。如果我的假设是正确的,那么您需要做的就是将先前笔划的值存储到数组中:
我做了一个 jsfiddle here ,这样你就可以看到它正常工作并玩弄它。
每次移动都清除画布是非常有效的,没有性能问题。
包含说明的源代码
$(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();
})
})
})
答案 1 :(得分:1)
我想你会想要使用两个堆叠的画布。顶层将具有动态线(因此可以清除每个鼠标上的整个事物),然后单击,您可以在下部画布上划线