首页 > 编程语言> > javascript-为什么Kinetic.Shape的drawFunc方法被调用两次？

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

2019-11-23 04:38:38 作者：互联网

尝试使用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这样的问题.

但是,由于您要询问…我整理了一个modification of your code,它为drawFunc的每次调用捕获了canvas参数.

>似乎第一个调用实际上是在页面的画布上绘制形状：canvas.element.parentNode是容器< div&gt ;,因此显然是页面上的画布.
>但是,第二个调用将形状绘制到页面外画布上：canvas.element.parentNode为null,这意味着该画布当前未连接到DOM.

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

>也许它可以将其用于快速动画处理(即,因此可以将下一个帧绘制在页面外画布上,然后快速将其换入)
>也许它使用屏幕外画布作为复杂形状的图像“印记”(即,不是重绘可能具有数千行和填充的形状,而是将形状绘制一次到屏幕外画布上,然后使用drawImage来绘制)快速绘制整个形状,而不是重新绘制每条单独的线)

编辑

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

Each layer has two canvas renderers, a scene renderer and a hit graph renderer. The scene renderer is what you can see, and the hit graph renderer is a special hidden canvas that’s used for high performance event detection.

标签：kineticjs,html5,javascript
来源： https://codeday.me/bug/20191123/2064919.html