0

我正在使用 KinetickJS 在屏幕上绘制图像。我在舞台上有一个图层，并收到了 1000 张 base64 格式的图像。首先，我尝试用 Kinetic 绘制它们

示例 1，在 1000 张图像之后效果很好，但当我尝试拖动或对图层执行某些操作时，它变得非常缓慢。所以我尝试下一个示例

var imageObj = new Image();
        imageObj.onload = function () {
            var image = new Kinetic.Image({
                x: imageInfo.LocationX,
                y: imageInfo.LocationY,
                image: imageObj,
                width: imageInfo.Width,
                height: imageInfo.Height,
                name: "Update"
            });

            layer.add(image);
            layer.draw();

        };
        imageObj.src = "data:image/jpeg;base64," + imageInfo.Image;

示例 2，但在这种情况下，画布开始在每次更新时闪烁

var imageObj = new Image();


       imageObj.onload = function () {

                 var canvas = layer.canvas;
                  var context = canvas.getContext('2d');
//                   context.globalCompositeOperation = "destination-over";
             context.drawImage(imageObj, imageInfo.LocationX, imageInfo.LocationY);


            };
        imageObj.src = "data:image/jpeg;base64," + imageInfo.Image;

那么你有什么想法可以让它更快和/或禁用闪烁吗？

4

1 回答 1

0

最新的 KineticJS 4.3 大大加快了拖动和其他功能的速度。这可能会解决您的问题。

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js
于 2013-01-11T17:18:24.753 回答