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

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

转载作者：可可西里更新时间：2023-11-01 13:12:48

27

4

在尝试使用 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放在一起了捕获 canvas每次调用 drawFunc 的参数.

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

出于多种原因，KineticJS 可能有一个可用的页外 Canvas :

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

编辑

在 KinecticJS 的特定情况下，隐藏的 Canvas 似乎是 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.

关于javascript - 为什么 Kinetic.Shape 的 drawFunc 方法被调用了两次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17428175/

27

4

0

文章推荐： javascript - 选择在javascript中的位置

文章推荐：使用私有(private)类函数/变量的 PHP 静态方法

文章推荐： windows - free 和 malloc 的 Visual C++ 线程安全？

文章推荐： php - 网络应用 : Storing ID in hidden fields safe?

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城

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