KineticJS，类似程序的画图，画笔间隙

问题描述：

我正在尝试使用KineticJS画画。我正在尝试使用源自鼠标位置的圆圈绘制颜色。然而鼠标位置的eventlistener似乎太慢，当我将鼠标移动得太快时，画出的圆圈彼此相距很远，结果如下：KineticJS，类似程序的画图，画笔间隙

我已经看到有人用点画线来填充数组，但我认为这就是非常不利于优化，因为在屏幕上配置太多画布后，画布开始滞后，因为它有太多的线条来重绘每一帧。我决定取消对图层的清理，并在当前鼠标位置添加新的圆圈，并删除旧的圆圈进行优化。然而，由于我没有画出快速鼠标移动的线条，它留下了巨大的差距。如果有人能帮助我，我将非常感激。

这里是我的代码：

(function() { 
 
    var stage = new Kinetic.Stage({ 
 
     container: 'main-drawing-window', 
 
     width: 920, 
 
     height: 750 
 
    }), 
 
    workplace = document.getElementById('main-drawing-window'), 
 
    layer = new Kinetic.Layer({ 
 
     clearBeforeDraw: false 
 
    }), 
 
    border = new Kinetic.Rect({ 
 
     stroke: "black", 
 
     strokeWidth: 2, 
 
     x: 0, 
 
     y: 0, 
 
     width: stage.getWidth(), 
 
     height: stage.getHeight() 
 
    }), 
 
    brush = new Kinetic.Circle({ 
 
     radius: 20, 
 
     fill: 'red', 
 
     strokeWidth: 2, 
 
     x: 100, 
 
     y: 300 
 
    }); 
 

 
    Input = function() { 
 
    this.mouseIsDown = false; 
 
    this.mouseX = 0; 
 
    this.mouseY = 0; 
 
    this.offsetX = 0; 
 
    this.offsetY = 0; 
 
    }; 
 

 
    var input = new Input(); 
 

 
    document.documentElement.onmousedown = function(ev) { 
 
    input.mouseIsDown = true; 
 
    }; 
 

 
    document.documentElement.onmouseup = function(ev) { 
 
    input.mouseIsDown = false; 
 
    }; 
 

 
    document.documentElement.onmousemove = function(ev) { 
 
    ev = ev || window.event; 
 

 
    // input.mouseX = (ev.clientX - workplace.offsetLeft); 
 
    // input.mouseY = (ev.clientY - workplace.offsetTop); 
 
    input.mouseX = (ev.offsetX); 
 
    input.mouseY = (ev.offsetY); 
 
    }; 
 

 
    function DistanceBetweenPoints(x1, y1, x2, y2) { 
 
    return Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1))); 
 
    } 
 

 
    var canvasDraw = setInterval(function() { 
 
    // console.log(input); 
 
    if (input.mouseIsDown) { 
 
     workplace.style.cursor = "crosshair"; 
 
     var currentBrushPosition = brush.clone(); 
 
     currentBrushPosition.setX(input.mouseX); 
 
     currentBrushPosition.setY(input.mouseY); 
 
     // var distance = DistanceBetweenPoints(brush.getX(), brush.getY(), currentBrushPosition.getX(), currentBrushPosition.getY()); 
 
     // if (distance > brush.getRadius() * 2) { 
 
     //  var fillingLine = new Kinetic.Line({ 
 
     //   points: [brush.getX(), brush.getY(), currentBrushPosition.getX(), currentBrushPosition.getY()], 
 
     //   stroke: 'yellow', 
 
     //   strokeWidth: brush.getRadius()*2, 
 
     //   lineJoin: 'round' 
 
     //  }); 
 
     //  // layer.add(fillingLine); 
 
     // } 
 

 
     layer.add(currentBrushPosition); 
 
     brush.remove(); 
 
     brush = currentBrushPosition; 
 
     layer.draw(); 
 
     // if (fillingLine) { 
 
     //  fillingLine.remove(); 
 
     // } 
 
    } 
 
    if (!input.mouseIsDown) { 
 
     workplace.style.cursor = 'default'; 
 
    } 
 
    }, 16); 
 

 
    layer.add(border); 
 
    stage.add(layer); 
 
})();

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Coloring Game</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div id="main-drawing-window"></div> 
 
    <script type="text/javascript" src="./JS files/canvas-draw.js"></script> 
 
</body> 
 

 
</html>

答

不要为每个鼠标移动使用单独的Kinetic.Circle秒。每个Kinetic对象都是一个“托管”对象，并且管理占用大量资源。 KineticJS将随着圈子数量随着鼠标移动次数的增加而缓慢下降。

相反，使用Kinetic.Shape并绘制你圈在画布上用

// This is Pseudo-code since I haven't worked with KineticJS in a while 
shapeContext.beginPath(); 
shapeContext.arc(mouseX,mouseY,20,0,Math.PI*2); 
shapeContext.fillStrokeShape(this);

这可能会清除你的问题，但如果鼠标在一个单一的鼠标移动很远的感动，那么你可能要画lineTo（而不是arc）在最后一个鼠标点和当前遥远的鼠标点之间。

KineticJS，类似程序的画图，画笔间隙

相关推荐