未捕獲的typeError不能調用未定義和未捕獲的方法'remove children'typeError無法讀取未定義的屬性'children'

Question

我正在使用kineticjs和html5在android phonegap應用程序中做項目 我得到3個錯誤不知道什麼是確切的問題

1. 遺漏的類型錯誤不能調用方法在文件「刪除兒童的不確定：///android_assest/www/index.html
2. 遺漏的類型錯誤的文件無法讀取的未定義的屬性「孩子」：/// android_assest/WWW/index.html中
3. 未捕獲的ReferenceError動力學沒有定義科技檔案：///android_assest/www/index.html

我谷歌，但cudn't找到答案，因此任何幫助，將不勝感激

function clearCanvas() { 
     layer.removeChildren(); 
     layer.draw(); 
     haveBackground = false; 
    } 


     function downloadCanvas() { 
     var canvas = stage.children[0].canvas; 
     var oImgPNG = Canvas2Image.saveAsPNG(canvas, true); 
     document.body.appendChild(oImgPNG); 
    } 


<img alt="" src="res/drawable-hdpi/design15.png" id="gabby" onClick="addClickedImage('gabby ')"/><br /> 

那些片段以上，其中我得到提前 這裏error.Thanks是我PROGRAMM的腳本

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js"></script> 
<script type="text/javascript" src="assets/www/base64.js"></script> 
<script type="text/javascript" src="assets/www/canvas2image.js"></script> 
<script type="text/javascript"> 
    debugger; 
    var stage; 
    var layer; 
    var selected; 
    var wasSelected; 
    var haveBackground; // first dragged image sets stage size 
    /* 
    * Set up canvas stage and layer 
    */ 
    function initCanvas(id) { 
     stage = new Kinetic.Stage({ 
      container: id, 
      width: 150, 
      height: 50 
     }); 
     layer = new Kinetic.Layer(); 
     stage.add(layer); 
     stage.draw(); 
    } 

    /* 
    * Clear canvas, start again 
    */ 
    function clearCanvas() { 
     layer.removeChildren(); 
     layer.draw(); 
     haveBackground = false; 
    } 


    /* 
    * Download canvas 
    */ 
    function downloadCanvas() { 
     var canvas = stage.children[0].canvas; 
     var oImgPNG = Canvas2Image.saveAsPNG(canvas, true); 
     document.body.appendChild(oImgPNG); 
    } 

    /* 
    * Upload File 
    */ 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah') 
     .attr('src', e.target.result) 
     .width(20) 
     .height(20); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
    /* 
    * Resize 
    */ 
    function resize(group, activeAnchor) { 
     var tl = group.get(".tl")[0]; 
     var tr = group.get(".tr")[0]; group 
     var br = group.get(".br")[0]; 
     var bl = group.get(".bl")[0]; 
     var handle = group.get(".handle")[0]; 
     var ghost = group.get(".ghost")[0]; 
     var flip = group.get(".flip")[0]; 
     var image = group.get(".image")[0]; 

     switch (activeAnchor.attrs.name) { 
      case "tl": 
       bl.setPosition(tl.attrs.x, br.attrs.y); 
       tr.setPosition(br.attrs.x, tl.attrs.y); 
       break; 
      case "tr": 
       br.setPosition(tr.attrs.x, bl.attrs.y); 
       tl.setPosition(bl.attrs.x, tr.attrs.y); 
       break; 
      case "bl": 
       br.setPosition(tr.attrs.x, bl.attrs.y); 
       tl.setPosition(bl.attrs.x, tr.attrs.y); 
       break; 
      case "br": 
       bl.setPosition(tl.attrs.x, br.attrs.y); 
       tr.setPosition(br.attrs.x, tl.attrs.y); 
       break; 
     } 

     handle.setPosition((tr.attrs.x + tl.attrs.x)/2, tl.attrs.y - 20); 
     ghost.setPosition(handle.getPosition()); 
     flip.setPosition((tr.attrs.x + tl.attrs.x)/2, bl.attrs.y + 20); 

     image.setPosition(tl.attrs.x, tl.attrs.y); 
     image.attrs.width = tr.attrs.x - tl.attrs.x; 
     image.attrs.height = bl.attrs.y - tl.attrs.y; 
    } 


    /* 
    * Rotate 
    */ 
    function rotate(group) { 
     var c = group.getAbsolutePosition(); 
     var p0 = { x: c.x, y: c.y - 50 }; 
     var p1 = stage.getUserPosition(); 

     var p0c = Math.sqrt(Math.pow(c.x - p0.x, 2) + Math.pow(c.y - p0.y, 2)); // p0->c (b) 
     var p1c = Math.sqrt(Math.pow(c.x - p1.x, 2) + Math.pow(c.y - p1.y, 2)); // p1->c (a) 
     var p0p1 = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2)); // p0->p1 (c) 

     var deg = Math.acos((p1c * p1c + p0c * p0c - p0p1 * p0p1)/(2 * p1c * p0c)); 

     // fix for negative rotation 
     if (p1.x < c.x) { 
      deg = (360 * (Math.PI/180)) - deg; 
     } 
     group.setRotation(deg); 
    } 


    /* 
    * Flip 
    */ 
    function flip(group) { 
     group.attrs.scale.x = group.attrs.scale.x * -1; 
    } 


    /* 
    * Fix center offset (due to resizing from a corner) 
    */ 
    function fixCenterOffset(group) { 
     var image = group.get(".image")[0] 
     var currentOffset = group.getCenterOffset(); 
     var currentPosition = group.getPosition(); 
     var newOffset = { x: image.attrs.width/2, y: image.attrs.height/2 }; 
     var newPosition = { 
      x: currentPosition.x - (currentOffset.x - newOffset.x), 
      y: currentPosition.y - (currentOffset.y - newOffset.y) 
     } 

     group.setCenterOffset(newOffset); 
     group.setPosition(newPosition); 
     layer.draw(); 
    } 


    /* 
    * Prepare background image 
    */ 
    function prepareBackground(img) { 
     var maxWidth = 200; 
     var maxHeight = 100; 
     if (img.width > maxWidth) { 
      img.height = (maxWidth/img.width) * img.height; 
      img.width = maxWidth; 
     } 
     if (img.height > maxHeight) { 
      img.width = (maxHeight/img.height) * img.width; 
      img.height = maxHeight; 
     } 
     return img; 
    } 


    /* 
    * Add an image plus anchors to the canvas using group 
    */ 
    function initImage(img, type) { 

     if (type == "background") { 
      var kimggroup = initBackgroundImage(img); 
     } else { 
      var kimggroup = initNormalImage(img); 
     } 

     layer.add(kimggroup); 
     stage.add(layer); 

     // Draw the img 
     stage.draw(); 
    } 


    /* 
    * Add background image 
    */ 
    function initBackgroundImage(img) { 

     var img = prepareBackground(img); 
     stage.setSize(img.width, img.height); 

     var kimggroup = new Kinetic.Group({ 
      x: 0, 
      y: 0, 
      draggable: false 
     }); 

     // Make the img and add it to the group 
     var kimg = new Kinetic.Image({ 
      x: 0, 
      y: 0, 
      image: img, 
      width: img.width, 
      height: img.height, 
      name: "image" 
     }); 
     kimggroup.add(kimg); 

     return kimggroup; 

    } 


    /* 
    * Add normal image 
    */ 
    function initNormalImage(img) { 

     var kimggroup = new Kinetic.Group({ 
      x: stage.attrs.width/2, 
      y: stage.attrs.height/2, 
      draggable: true, 
      centerOffset: [img.width/2, img.height/2] 
     }); 

     // Make the img and add it to the group 
     var kimg = new Kinetic.Image({ 
      x: 0, 
      y: 0, 
      image: img, 
      width: img.width, 
      height: img.height, 
      name: "image" 
     }); 
     kimggroup.add(kimg); 

     // Add anchors for resizing and rotation 
     addAnchor(kimggroup, 0, 0, "tl"); 
     addAnchor(kimggroup, img.width, 0, "tr"); 
     addAnchor(kimggroup, img.width, img.height, "br"); 
     addAnchor(kimggroup, 0, img.height, "bl"); 
     addAnchor(kimggroup, img.width/2, -20, "handle"); 
     addAnchor(kimggroup, img.width/2, -20, "ghost"); 
     addAnchor(kimggroup, img.width/2, img.height + 20, "flip"); 

     // On click make the image selected 
     kimggroup.on("mousedown", function() { 
      wasSelected = selected; 
      selected = this; 
      updateSelected(); 
      this.moveToTop(); 
      stage.draw(); 
     }); 

     kimg.on("mouseover", function() { 
      document.body.style.cursor = "move"; 
     }); 

     kimg.on("mouseout", function() { 
      document.body.style.cursor = "default"; 
     }); 

     // Double click to remove 
     kimg.on("dblclick dbltap", function() { 
      layer.remove(kimggroup); 
      layer.draw(); 
     }); 

     return kimggroup; 
    } 


    /* 
    * Create anchor and add to group 
    */ 
    function addAnchor(group, x, y, name) { 
     var config = { 
      x: x, 
      y: y, 
      stroke: "#666", 
      fill: "#ddd", 
      strokeWidth: 2, 
      radius: 4, 
      name: name, 
      draggable: true 
     } 
     switch (name) { 
      case "handle": 
       config.draggable = false; 
       var anchor = addRotateAnchor(group, config); 
       break; 
      case "ghost": 
       config.stroke = "#666"; 
       var anchor = addRotateGhostAnchor(group, config); 
       break; 
      case "flip": 
       config.stroke = "#666"; 
       config.draggable = false; 
       var anchor = addFlipAnchor(group, config); 
       break; 
      default: 
       var anchor = addResizeAnchor(group, config); 
       break; 
     } 
     anchor.hide(); 
     group.add(anchor); 
    } 

    /* 
    * Set up resize anchor 
    */ 
    function addResizeAnchor(group, config) { 
     var anchor = new Kinetic.Circle(config); 

     anchor.on("dragmove", function() { 
      resize(group, this); 
      layer.draw(); 
     }); 
     anchor.on("mousedown touchstart", function() { 
      group.draggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on("dragend", function() { 
      fixCenterOffset(group); 
      group.draggable(true); 
      layer.draw(); 
     }); 

     anchor.on("mouseover", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "pointer"; 
      this.setStrokeWidth(3); 
      layer.draw(); 
     }); 
     anchor.on("mouseout", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "default"; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 
     return anchor; 
    } 

    /* 
    * Set up rotation anchor 
    */ 
    function addRotateAnchor(group, config) { 
     var anchor = new Kinetic.Circle(config); 

     anchor.on("mouseover", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "pointer"; 
      this.setStrokeWidth(3); 
      layer.draw(); 
     }); 
     anchor.on("mouseout", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "default"; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 
     return anchor; 
    } 

    /* 
    * Set up rotation ghost anchor 
    */ 
    function addRotateGhostAnchor(group, config) { 
     var anchor = new Kinetic.Circle(config); 

     anchor.on("dragmove", function() { 
      rotate(group); 
      layer.draw(); 
     }); 
     anchor.on("mousedown touchstart", function() { 
      group.draggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on("dragend", function() { 
      var handle = group.get(".handle")[0]; 
      this.setPosition(handle.getPosition()); 
      group.draggable(true); 
      layer.draw(); 
     }); 

     anchor.on("mouseover", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "pointer"; 
      this.setStrokeWidth(3); 
      layer.draw(); 
     }); 
     anchor.on("mouseout", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "default"; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 
     return anchor; 
    } 

    /* 
    * Set up flip anchor 
    */ 
    function addFlipAnchor(group, config) { 
     var anchor = new Kinetic.Circle(config); 

     anchor.on("mousedown touchstart", function() { 
      flip(group); 
      layer.draw(); 
     }); 

     anchor.on("mouseover", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "pointer"; 
      this.setStrokeWidth(3); 
      layer.draw(); 
     }); 
     anchor.on("mouseout", function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = "default"; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 
     return anchor; 
    } 


    /* 
    * Show anchors only when group selected 
    */ 
    function updateSelected() { 
     // Deselect the old img if there was any 
     if (wasSelected) { 
      wasSelected.get(".tl")[0].hide(); 
      wasSelected.get(".tr")[0].hide(); 
      wasSelected.get(".br")[0].hide(); 
      wasSelected.get(".bl")[0].hide(); 
      wasSelected.get(".handle")[0].hide(); 
      wasSelected.get(".ghost")[0].hide(); 
      wasSelected.get(".flip")[0].hide(); 
     } 

     // Select the new image 
     selected.get(".tl")[0].show(); 
     selected.get(".tr")[0].show(); 
     selected.get(".br")[0].show(); 
     selected.get(".bl")[0].show(); 
     selected.get(".handle")[0].show(); 
     selected.get(".ghost")[0].show(); 
     selected.get(".flip")[0].show(); 

    } 


    /* 
    * Add clicked images to the canvas 
    */ 
    function addClickedImage(name) { 
     var img = document.getElementById(name); 
     initImage(img, "normal"); 
    } 


    /* 
    * Listen for images dragged into canvas and add them 
    */ 
    function setupDragAndDrop() { 
     stage.content.addEventListener("dragover", function (evt) { 
      evt.preventDefault(); 
     }, false); 

     // Handle dropped image file - only Firefox and Google Chrome 
     stage.content.addEventListener("drop", function (evt) { 
      dragImg = new Image(); 
      var files = evt.dataTransfer.files; 
      if (files.length > 0) { 
       var file = files[0]; 
       if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 
        var reader = new FileReader(); 
        reader.onload = function (evt) { 
         dragImg.src = evt.target.result; 
        }; 
        reader.readAsDataURL(file); 
        dragImg.onload = function() { 
         if (!haveBackground) { 
          haveBackground = true; 
          var type = "background"; 
         } else { 
          var type = "normal"; 
         } 
         initImage(this, type); 
        } 
       } 
      } 
      evt.preventDefault(); 
     }, false); 
    } 

    window.onload = function() { 
     initCanvas("container"); 
     setupDragAndDrop(); 
    }; 

</script> 

Answer 1

更多細節：

，因爲你不能「刪除未定義的孩子'，你的圖層沒有被定義在某處（或被刪除或覆蓋）。

確保你有這樣的話：

var layer = new Kinetic.Layer(); 

不能夠訪問孩子意味着你的同臺演出。但簡單地說，因爲「動感」是沒有定義的地方，你要麼不包括在你的源代碼的Kinetic.4.3.0.1.JS，或者你被錯誤地宣告它。

請確保您有kinetic.js文件中引用的地方，例如標記或標記：

<script src='http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js'></script> 

或鏈接到一個硬拷貝在您的項目

<script src='../kinetic-v4.3.1.js'></script> // in this example it is located one directory up, but you could put it anywhere really. 

Answer 2

它的作用域問題。

你的可變層不從功能clearCanvas訪問（）。 不理想，但它通過首先定義變量來工作，然後像以下那樣使用它;

<script> 
var layer; 
$(function() { 
    layer = new Kinetic.Layer(); 
    ..... 
}); 
</script> 

這樣做同樣適用於你的變量「舞臺」

---您的評論後編輯---

<script> 
var layer, script, stage; 
function initCanvas(id) { 
    stage = new Kinetic.Stage({ container: id, width: 150, height: 50 }); 
    layer = new Kinetic.Layer(); 
    stage.add(layer); 
    stage.draw(); 
} 
</script> 

，如果你定義的內部函數「階段=東西」呢像'var stage = something'一樣工作。 所以如果你想訪問函數外的舞臺和圖層，你可以在函數之外定義它。