Html 5畫布更新與KinetickJS

我使用KinetickJS在屏幕上繪製圖像。我在舞臺上有一層，並以base64格式接收1000張圖像。首先，我嘗試與動力學Html 5畫布更新與KinetickJS

例1拉攏他們，工作正常，但圖像的1000後，當我試圖拖動或做一些與層成爲veeeeeeeery slow.So我嘗試下面的例子

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;

那麼，你有什麼想法如何使它更快和/或禁用閃爍？

來源

2012-06-21 Sergei Sleptsov

忘記添加，也許它可能會結合或合併圖像或層與kinetick。因爲我不需要對圖像進行任何操作，所以我只需將它放置在正確的位置和比例上即可。在這種情況下，圖層上只有一個圖像。有沒有解決方案？ –

最新的KineticJS 4.3加速拖拽和其他功能相當多。這可能會解決您的問題。

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

來源

2013-01-11 17:18:24 SoluableNonagon

Html 5畫布更新與KinetickJS

回答

相關問題