從舞臺用膠版KineticJS保存圖像HTML5

Question

我想保存KineticJS舞臺的一部分。此代碼工作完美：

stage.toDataURL({ 
     width: 350, 
     height: 350, 
     mimeType: "image/jpeg", 
     callback: function(dataUrl) { 
      /* 
      * here you can do anything you like with the data url. 
      * In this tutorial we'll just open the url with the browser 
      * so that you can see the result as an image 
      */ 
      window.open(dataUrl); 
     } 
     }); 
    }, false); 

但我想要的是加一個偏移量這一點，所以圖像將開始和舞臺區域的座標（75,75）。任何想法？

Answer 1

好吧，既然沒有crop（）方法，你將不得不恢復在兩個方向上移動舞臺75上的所有對象，幸運的是，這不是很困難。

喜歡的東西：

var layersList = stage.getChildren(); 
for (var layerNum in layersList){ //loop through all layers 
    var childList = layerList.getChildren(); //get all children of the layer 
    for(var childNum in childList){ 
      childList[childNum].move(-75,-75); 
    } 
} 
stage.draw(); 
stage.toDataURL({.....}); 

您可以通過使用相同的代碼，做.move（75,75）撤消此;每個項目放回原來的位置

，或者如果你想要一個偏移通過函數定義只是這樣做：

function moveStage(offsetX, offsetY){ 
    var layersList = stage.getChildren(); 
    for (var layerNum in layersList){ //loop through all layers 
     var childList = layerList.getChildren(); //get all children of the layer 
     for(var childNum in childList){ 
      childList[childNum].move(-offsetX,-offsetY); 
     } 
    } 

stage.draw(); 
stage.toDataURL({.....}); 
}