Kinetic.js 캔버스 외부 버튼 클릭시 캔버스에서 이미지 제거

Question

도움이 필요합니다 .. kinetic.js 라이브러리 문제인지 아니면 여기에서 뭔가 잘못하고 있는지 알 수 없습니다. windows.onload에 2 개의 이미지를 로딩합니다. 그리고 캔버스 외부의 이미지 세트와 이미지의 onclick이 잘 작동하는 캔버스 내부에 배치하고 있습니다. (저는 하나의 함수를 사용하여 이미지를로드했습니다. 이미지의이 .. 설정을 수행하여 캔버스 외부 :

 <li> 
     <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))"> 

     <img src="<?php echo base_url()?>images/eagle/baby1.png" id="i3" alt="Pulpitrock"width="100" height="120" /></a> 
     <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))">Close</a> 
     </li> 
    <li> 
     <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))"> 
     <img src="<?php echo base_url()?>images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /></a> 
     <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))">Close</a> 
     </li> 

로딩 이미지를

  function loadWithType(img){ 
     var sources = { 
      yoda1 : img.src, 
     }; 
     loadImages(sources,initStage1); 
     }; 

기능 (정의와 모든)

  function initStage1(images){ 

      layert = new Kinetic.Layer(); 

      var yoda1 = new Kinetic.Image({ 
      image: images.yoda1, 
      x: 106, 
      y: 0, 
      width: 180, 
      height: 220, 
      draggable:true, 
      detectionType: "pixel" 

      }); 


        /* 
        * check if animal is in the right spot and 
        * snap into place if it is 
        */ 
        yoda1.on("dragend", function() { 
          layert.draw(); 
          // disable drag and drop 

          yoda1.saveImageData(); 
        }); 

      layert.add(yoda1); 
      stage.add(layert); 
      yoda1.saveImageData(); 

      } 

이

을 (그들을 클릭에 이미지를로드) .. 잘 작동되지만 나는 버튼을 가까이하여 이미지를 제거하려고 할 때 .. 나는 최신 이미지가 제거됩니다 같은 문제가 발생하고 해당 라이브러리 후 나에게 오류 .. 내가 이런 일을하고 있어요 을 발생 해요 ..

  function removewithType(img){ 
     var sources = { 
      yoda1 :img.src, 
     }; 
     loadImages(sources,removeStage1); 
     } 

     function removeStage1(images){ 

       var yoda1 = new Kinetic.Image({ 
       image: images.yoda1, 
       x: 106, 
       y: 0, 
       width: 180, 
       height: 220, 
       draggable:true, 

      }); 
       layert.clear(); 
       stage.remove(layert); 
       layert.draw(); 

       } 

,536,913,632 10

여기에 먼저 .. layert.remov (yoda1) 기능이 작동하지 않습니다.

이 기능은 예상치 못한 방식으로 작동하고 ..

어떤 포인터

감사합니다 ..

Answer 1

이미지를 제거하는 이유가 숨어있는 경우, 당신은 단순히 사용할 수 있습니다. 숨기기() 함수 :

yoda1.hide(); 
layert.draw(); 

당신이 그것을 stage.remove(layert); 제거 후 layert.draw();를 사용하는 코드의 또 다른 문제는, 그래서 어 이 레이어를 제거했다면 그릴 수 없습니다.