当您的 mousemove 处理程序检测到大于矩形大小的拖动距离时，您需要绘制多个矩形以覆盖整个拖动距离。
以下是每次鼠标移动期间要执行的操作：
- 计算鼠标在拖动过程中移动了多远。
- 计算覆盖该“拖线”需要多少个矩形。
- 使用线性插值沿拖线绘制多个矩形。
在下图中，我非常快速地拖动了 T 的底部。
请注意，代码用多个矩形填充了拖动线的所有部分。
这是代码和小提琴：http: //jsfiddle.net/m1erickson/D332T/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
#canvas{
border:solid 1px #ccc;
margin-top: 0px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container:'canvas',
width:350,
height:350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var painting = false ;
var lineThickness = 5 ;
var startX,startY;
$(stage.getContent()).on('mousedown', function (event) {
var pos=stage.getMousePosition();
startX=parseInt(pos.x);
startY=parseInt(pos.y);
painting = true;
});
$(stage.getContent()).on('mousemove', function (event) {
if(!painting){return;}
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var dx=mouseX-startX;
var dy=mouseY-startY;
var rectCount=Math.sqrt(dx*dx+dy*dy)/lineThickness;
if(rectCount<=1){
rect = new Kinetic.Rect({
x:mouseX,
y:mouseY,
width:lineThickness,
height:lineThickness,
fill:'black',
stroke: 'black',
strokeWidth: lineThickness,
lineJoin: 'round',
lineCap: 'round'
});
layer.add(rect);
}else{
for(var i=0;i<rectCount;i++){
// calc an XY between starting & ending drag points
var nextX=startX+dx*i/rectCount;
var nextY=startY+dy*i/rectCount;
// add a rect at the calculated XY
rect = new Kinetic.Rect({
x:nextX,
y:nextY,
width:lineThickness,
height:lineThickness,
fill:'red',
stroke: 'black',
strokeWidth: lineThickness,
lineJoin: 'round',
lineCap: 'round'
});
layer.add(rect);
}
}
layer.draw();
startX=mouseX;
startY=mouseY;
});
$(stage.getContent()).on('mouseup', function (event) {
startX=null;
startY=null;
painting = false;
});
$(stage.getContent()).on('mouseout', function (event) {
startX=null;
startY=null;
painting = false;
});
}); // end $(function(){});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
[基于OP对更快速度的需要添加]
或者，有一个更快、更有效的“草图”替代方案：
效率是您绘制一条多段线而不是许多矩形来覆盖拖动线。
这是一个小提琴：http: //jsfiddle.net/m1erickson/CCqhg/
这是用折线绘制的代码：
在 mousedown 中：从 mousedown 坐标开始创建一条新的折线
// a flag we use to see if we're dragging the mouse
var isMouseDown=false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points=[];
// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
isMouseDown = true;
points=[];
points.push(stage.getMousePosition());
var line = new Kinetic.Line({
points: points,
stroke: "green",
strokeWidth: 5,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
newline=line;
}
在 mousemove 中：在到达当前鼠标坐标的那条线上添加一个线段。
// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
if(!isMouseDown){return;};
points.push(stage.getMousePosition());
newline.setPoints(points);
// use layer.drawScene
// This avoids unnecessarily updating the hit canva
layer.drawScene();
}