使用 KinetickJS 更新 HTML 5 画布答案

【问题标题】：Html 5 canvas update with KinetickJS使用 KinetickJS 更新 HTML 5 画布
【发布时间】：2013-01-12 01:18:24
【问题描述】：

我正在使用 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;

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

【问题讨论】：

忘记添加，也许它可以将图像或图层与动力学结合或合并。因为我不需要对出现的图像进行任何操作，所以我只需将其放置到正确的位置和比例。在这种情况下，我将只有一个图像在图层上。有什么解决办法吗？

标签： html html5-canvas kineticjs

【解决方案1】：

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

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

【讨论】：