Question

我正在使用KinetickJS在屏幕上绘制图像。我在舞台上有一层，并以base64格式接收1000张图片。首先，我尝试用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;

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

Answer 1

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

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js

使用KinetickJS更新Html 5画布

1 个答案: