为什么是动能.形状'的drawFunc方法调用了两次

Why is Kinetic.Shape's drawFunc method called twice?

本文关键字：调用 方法 两次 drawFunc 形状 为什么      更新时间：2023-09-26

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

干杯

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

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

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

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

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

编辑

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

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

相关文章：