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