Question

在尝试使用KineticJS（v4.5.4）创建自定义形状时，我注意到Kinetic.Shape类drawFunc方法被调用两次，比我预期的时间多一次，给出了下面的代码（改编自http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ }）。当我运行下面的代码时，我可以看到我的浏览器控制台“DEBUG”被打印两次，表明有问题的方法被调用了两次，为什么呢？

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      /*
       * create a triangle shape by defining a
       * drawing function which draws a triangle
       */
      var triangle = new Kinetic.Shape({
        drawFunc: function(canvas) {
          console.log('DEBUG');
          var context = canvas.getContext();
          context.beginPath();
          context.moveTo(200, 50);
          context.lineTo(420, 80);
          context.quadraticCurveTo(300, 100, 260, 170);
          context.closePath();
          canvas.fillStroke(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the triangle shape to the layer
      layer.add(triangle);

      // add the layer to the stage
      stage.add(layer);

    </script>
  </body>
</html>

干杯

Answer 1

KineticJS可以在任何时候调用drawFunc。你应该设计你的形状drawFunc，以便在任何时候重复调用。在任何特定时间调用为什么 drawFunc的确切问题是图书馆设计师的一个问题，他们努力工作以确保您永远不必担心诸如何时和多久等问题drawFunc应该被援引。

但是因为你问...我把modification of your code放在一起，为canvas的每次调用捕获drawFunc参数。

看来第一个调用实际上是在页面画布上绘制形状：canvas.element.parentNode是容器<div>，所以这显然是页面上的画布。
然而，第二个调用将形状绘制为页外画布：canvas.element.parentNode为null，这意味着画布当前未附加到DOM

KineticJS可能有一个有用的离页画布，原因有很多：

也许它将它用于快速动画（即，它可以在页外画布上绘制下一帧，然后快速交换）
也许它使用离屏画布作为复杂形状的图像“标记”（即，不是重新绘制可能有数千行和填充的形状，而是将形状绘制一次到屏幕外的画布，然后使用drawImage快速绘制整个形状，而不是重新绘制每个单独的行）

修改

在KinecticJS的特定情况下，隐藏的画布似乎是used for event detection（例如，确定点击是否落在绘制对象的边界内）：

每个图层都有两个画布渲染器，一个场景渲染器和一个命中图渲染器。您可以看到场景渲染器，命中图渲染器是一个特殊的隐藏画布，用于高性能事件检测。

为什么Kinetic.Shape的drawFunc方法被调用两次？

1 个答案: