javascript - 除非受到其他操作的强制，否则组过渡不会绘制到 Canvas 上

Question

我正在尝试过渡到一个组并且它做到了，但只有当其他东西强制绘制舞台时我才能看到过渡。过渡本身不会在进行时更新 Canvas 。组内有 4 个 Kinetic.Image 和 4 个 Kinetic.Text。知道如何让它工作吗？

假设#score group x: 1000

var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
    x: 800,
    duration: 5
});

Answer 1

我担心需要更多的代码来实际告诉可能缺少的内容，但我的猜测是您将元素添加到了组中，该组已经在一个图层中，该图层已经在舞台上。您的transitionTo正在缓冲区中渲染，但由于元素从未在舞台上“绘制”，因此动画不会转换为可视舞台。也许如果您提供更多代码或创建一个 jsFiddle，我可以提供更多见解。

同时，请确保您的 4 个图像和 4 个文本对象出现在舞台上，然后再调用 TransitionTo(暂时注释掉过渡)，然后再试一次。

var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
    group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});

让我知道你的想法。