Question

我正在尝试使用KineticJS做一些涂料。我试图用来自鼠标位置的圆圈绘制颜色。然而，鼠标位置的eventlistener看起来太慢了，当我移动鼠标太快时，绘制的圆圈彼此远离，导致：

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

这是我的代码：

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

Answer 1

不要为每个鼠标移动使用单独的Kinetic.Circle个。每个Kinetic对象都是一个＆＃34;托管＆＃34;对象和管理占用了大量资源。随着每个鼠标移动圈数增加，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，绘制类似程序，画笔间隙

1 个答案: