kineticjs 업로드 된 이미지에 크기 조정 앵커를 추가하십시오.

Question

kinetic canvas에서 작업 중입니다. 마우스 오버시 또는 클릭시에 크기 조정 앵커를 추가해야합니다. 크기 조정 앵커를 추가하는 방법에 대한 많은 예제가 있지만 미리로드 된 이미지 용이며, 사용자가 업로드 한 이미지에 추가하는 방법에 대한 예를 찾고 있습니다.

다음은 그룹에 이미지를 추가 한 다음 이미지의 크기를 조절하기위한 앵커를 추가해야합니다 :) 사전에 Fiddle

감사 업 로더 여기

//image loader 
var imageLoader = document.getElementById('imageLoader'); 
imageLoader.addEventListener('change', handleImage, false); 

function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
     var img = new Image(); 
     img.onload = function() { 
      layer.add(new Kinetic.Image({ 
       x: 100, 
       y: 50, 
       image: img, 
       width: 200, 
       height: 130, 
       draggable: true 
      })); 
      text.moveToTop(); 
      stage.draw(); 
     }; 
     console.log(event); 
     img.src = event.target.result; 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
} 

에 대한 JS입니다

Answer 1

.

난 당신의 코드

당신은 addanchor 및 업데이트 기능을 추가 할 필요가

를 수정했습니다. 나는이 링크가 당신에게 도움이되기를 바랍니다 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
    var imageGroup = new Kinetic.Group({ 
    x: 100, 
    y: 50, 
    draggable: true 
    }); 
    layer.add(imageGroup); 
    var img = new Image(); 
       img.onload = function() { 
        imageGroup.add(new Kinetic.Image({ 
         x: 0, 
         y: 0, 
         image: img, 
         width: 200, 
         height: 130, 
         draggable: true 
        })); 

       addAnchor(imageGroup, 100, 50, 'topLeft'); 
       addAnchor(imageGroup, 300, 50, 'topRight'); 
       addAnchor(imageGroup, 300, 180, 'bottomRight'); 
       addAnchor(imageGroup, 100, 180, 'bottomLeft'); 
        text.moveToTop(); 
        stage.draw(); 
       }; 
       console.log(event); 
       img.src = event.target.result; 
      }; 
      reader.readAsDataURL(e.target.files[0]); 
     }