3

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

干杯

4

1 回答 1

3

KineticJS 可以在drawFunc它选择的任何时间调用。您应该将您的形状设计drawFunc为可以随时重复调用。为什么 在任何特定时间被调用的确切问题drawFunc是库设计者关心的问题，他们努力确保您永远不必担心drawFunc应该何时以及多久被调用等问题。

但是，既然您要问...我对您的代码进行了修改，该修改捕获了canvas每次调用的参数drawFunc。

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

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

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

编辑

在 KinecticJS 的特定情况下，隐藏画布似乎用于事件检测（例如，确定点击是否落在绘制对象的边界内）：

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

于 2013-07-02T14:56:04.040 回答