为什么Kinetic.Shape的drawFunc方法被调用两次？ [英] Why is Kinetic.Shape's drawFunc method called twice?
问题描述
在尝试使用KineticJS（v4.5.4）创建自定义形状时，我注意到Kinetic.Shape类drawFunc方法被调用两次，比我预期的时间多一次，给出下面的代码（改编自 http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-教程/ ）。当我运行下面的代码时，我可以看到在我的浏览器控制台上DEBUG被打印两次，表明有问题的方法被调用了两次，为什么呢？
While trying to create a custom shape using KineticJS (v4.5.4) I noticed that the Kinetic.Shape class drawFunc method is called twice, one more time than what I was expecting given the code below (adapted from http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/). When I run the code below I can see that on my browser console "DEBUG" is printed twice, indicating that the method in question is called twice, why is that??
<!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 ，以便在任何时候重复调用。在任何特定时间调用为什么 <$ em $ c> drawFunc 的确切问题是图书馆设计师的一个问题，他们努力工作以确保您永远不需要担心应该调用 drawFunc 的时间和频率等问题。
KineticJS may invoke the drawFunc any time it chooses. You should design your shape's drawFunc to be invoked repeatedly and at any time. The exact question of why drawFunc is invoked at any particular time is a concern for the library designers, who work hard to make sure you never need to worry about such questions as when and how often drawFunc ought to be invoked.
但是因为你问...我把修改你的代码放在一起，抓住<$每次调用 drawFunc 的c $ c> canvas 参数。
But since you're asking... I put together a modification of your code that captures the canvas argument for each call to drawFunc.
- 看来第一个调用实际上是在页面画布上绘制形状：
canvas.element.parentNode是容器< div>，所以这显然是页面上的画布。 - 然而，第二次调用将形状绘制为页外画布：
canvas.element.parentNode是null，这意味着画布当前未附加到DOM。
- It appears that the first call actually draws the shape on the page's canvas:
canvas.element.parentNodeis the container<div>, so this is clearly the on-page canvas. - The second call, however, draws the shape to an off-page canvas:
canvas.element.parentNodeisnull, which means that the canvas is not currently attached to the DOM.
KineticJS cou ld有一个有用的离页画布有很多原因：
KineticJS could have a working off-page canvas for a number of reasons:
- 也许它用它来进行快速动画（即它可以有<> li>
- 也许它使用离屏画布作为复杂形状的图像标记（即，不是重绘一个可能有数千行和填充的形状，它将形状绘制一次到屏幕外的画布，然后使用
drawImage快速绘制整个形状，而不是重绘每个另外一行）
- Perhaps it uses it for rapid animation (i.e., so it can have the next frame drawn on an off-page canvas and then quickly swap it in)
- Perhaps it uses off-screen canvases as image "stamps" of complex shapes (i.e., instead of redrawing a shape that may have thousands of lines and fills, it draws the shape once to an off-screen canvas, and then uses
drawImageto quickly draw the whole shape, instead of redrawing each separate line)
编辑
In KinecticJS的具体情况，隐藏的画布似乎是用于事件检测（例如，确定点击是否落在绘制对象的边界内）：
In the specific case of KinecticJS, the hidden canvas seems to be used for event detection (e.g., determining whether a click has fallen in the bounds of a drawn object or not):
每个图层都有两个画布渲染器，场景渲染器和命中图渲染器。场景渲染器是您可以看到的，并且命中图形渲染器是一个特殊的隐藏画布，用于高性能事件检测。
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.
这篇关于为什么Kinetic.Shape的drawFunc方法被调用两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
