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

【问题标题】：Why is Kinetic.Shape's drawFunc method called twice?为什么 Kinetic.Shape 的 drawFunc 方法被调用了两次？
【发布时间】：2013-07-03 00:05:57
【问题描述】：

在尝试使用 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>

干杯

【问题讨论】：

标签： javascript html kineticjs

【解决方案1】：

KineticJS 可以随时调用drawFunc。您应该将您的形状的drawFunc 设计为可以随时重复调用。 为什么 drawFunc 在任何特定时间被调用的确切问题是图书馆设计人员所关心的问题，他们努力确保您永远不必担心诸如何时以及多久一次@987654327 这样的问题@ 应该被调用。

但是既然你在问...我整理了一个modification of your code，它为每次调用drawFunc 捕获canvas 参数。

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

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

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

编辑

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

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

【讨论】：

谢谢大家！我猜你提到的第二个画布元素是命中图渲染器，如下所述：github.com/ericdrowell/KineticJS/wiki。请注意编辑您的答案，以便我将其标记为已接受的答案。
@theeDude 很好的研究——我已将其添加到我的答案中。