KineticJs 캔버스 (이미지 업로드 포함)

Question

캔버스를 사용하는 중에 당분간 사람의 컴퓨터에서이 캔버스로 이미지를 업로드하고 싶습니다. 나는 또한 내가 지금 설정 한 다른 2 개의 이미지와 같이 움직이고 크기를 조정할 수 있기를 원합니다. 누군가 내가 현재 가지고있는 코드를 만들 수 있습니까? 이것은 내가 지금까지 가지고있는 모든 것입니다. 그래서 여러분이 저의 일부분이 가지고있는 올바른 클래스/ids로 그런 이름을 붙일 수 있다면. 고맙습니다.

<style> 
    canvas:active{ 
    cursor:pointer; 
    } 
.bg1{ 
    background-image:url('http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg'); 
    } 
    .bg2{ 
    background-image:url('http://s4.postimg.org/bnevxi1y5/wall8.png'); 
    } 

    .bg3{ 
    background-image:url('http://s13.postimg.org/6cgbaoblh/wall9.png'); 
    } 
</style> 

    <div id="container" class="bg1"></div> 


    <img src="http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg" width="50px" id="wall1"> 
      <img src="http://s4.postimg.org/bnevxi1y5/wall8.png" width="50px" id="wall2"> 
    <img src="http://s13.postimg.org/6cgbaoblh/wall9.png" width="50px" id="wall3"> 

<table><tr> 
    <td> 
    <center> <img src="http://s29.postimg.org/yn6t21ah3/sidetable.png" id="shower" width="100px" style="cursor:pointer;"> 
    <br> 
     <span id="hider1" class="sendingBut" style="cursor:pointer;">Remove </span> 

     </center></td> 
    </tr> 
    </table> 

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script> 

    <script> 
     $('#wall2').click(function() { 
    $('#container').removeClass('bg3').removeClass('bg1').addClass('bg2'); 
});  

      $('#wall1').click(function() { 
    $('#container').removeClass('bg3').removeClass('bg2').addClass('bg1'); 
}); 

      $('#wall3').click(function() { 
    $('#container').removeClass('bg1').removeClass('bg2').addClass('bg3'); 
}); 
       </script> 
<script> 

    function update(activeAnchor) { 
     var group = activeAnchor.getParent(); 

     var topLeft = group.find('.topLeft')[0]; 
     var topRight = group.find('.topRight')[0]; 
     var bottomRight = group.find('.bottomRight')[0]; 
     var bottomLeft = group.find('.bottomLeft')[0]; 
     var image = group.find('.image')[0]; 

     var anchorX = activeAnchor.x(); 
     var anchorY = activeAnchor.y(); 

     // update anchor positions 
     switch (activeAnchor.name()) { 
      case 'topLeft': 
      topRight.y(anchorY); 
      bottomLeft.x(anchorX); 
      break; 
      case 'topRight': 
      topLeft.y(anchorY); 
      bottomRight.x(anchorX); 
      break; 
      case 'bottomRight': 
      bottomLeft.y(anchorY); 
      topRight.x(anchorX); 
      break; 
      case 'bottomLeft': 
      bottomRight.y(anchorY); 
      topLeft.x(anchorX); 
      break; 
     } 

     image.setPosition(topLeft.getPosition()); 

     var width = topRight.x() - topLeft.x(); 
     var height = bottomLeft.y() - topLeft.y(); 
     if(width && height) { 
      image.setSize({width:width, height: height}); 
     } 
     } 
     function addAnchor(group, x, y, name) { 
     var stage = group.getStage(); 
     var layer = group.getLayer(); 

     var anchor = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      stroke: '#666', 
      fill: '#ddd', 
      strokeWidth: 2, 
      radius: 8, 
      name: name, 
      draggable: true, 
      dragOnTop: false, 
    opacity: .01 
     }); 

    anchor.on('mouseout', function() { 
     this.opacity(.01); 
     layer.draw() 
    }); 
    anchor.on('mouseenter', function() { 
     this.opacity(1.00); 
     layer.draw() 
    }); 

     anchor.on('dragmove', function() { 
      update(this); 
      layer.draw(); 
     }); 
     anchor.on('mousedown touchstart', function() { 
      group.setDraggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on('dragend', function() { 
      group.setDraggable(true); 
      layer.draw(); 
     }); 
     // add hover styling 
     anchor.on('mouseover', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'pointer'; 
      this.setStrokeWidth(4); 
      layer.draw(); 
     }); 
     anchor.on('mouseout', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'default'; 
      this.strokeWidth(2); 
      layer.draw(); 
     }); 

     group.add(anchor); 
     } 
     function loadImages(sources, callback) { 
     var images = {}; 
     var loadedImages = 0; 
     var numImages = 0; 
     for(var src in sources) { 
      numImages++; 
     } 



     for(var src in sources) { 
      images[src] = new Image(); 
      images[src].onload = function() { 
      if(++loadedImages >= numImages) { 
       callback(images); 
      } 
      }; 
      images[src].src = sources[src]; 
     } 
     } 
     function initStage(images) { 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 1000, 
      height: 764 
     }); 

    var layer = new Kinetic.Layer(); 


     var furniGroup = new Kinetic.Group({ 
      x: 270, 
      y: 100, 
      draggable: true 
     }); 
     var yodaGroup = new Kinetic.Group({ 
      x: 100, 
      y: 110, 
      draggable: true 
     }); 



     /* 
     * go ahead and add the groups 
     * to the layer and the layer to the 
     * stage so that the groups have knowledge 
     * of its layer and stage 
     */ 

     layer.add(furniGroup); 
     layer.add(yodaGroup); 
     stage.add(layer); 




    document.getElementById('shower').addEventListener('click', function() { 
     furniImg.show(); 
layer.draw(); 
      }, false); 


    document.getElementById('hider1').addEventListener('click', function() { 
     furniImg.hide(); 
layer.draw(); 
      }, false); 


     var furniImg = new Kinetic.Image({ 
      x: 0, 
      y: 0, 
    width: 338, 
      height: 285, 
      image: images.furni, 
        name: 'image' 
     }); 

     furniGroup.add(furniImg); 
    addAnchor(furniGroup, 0, 0, 'topLeft'); 
     addAnchor(furniGroup, 338, 0, 'topRight'); 
     addAnchor(furniGroup, 338, 285, 'bottomRight'); 
     addAnchor(furniGroup, 0, 285, 'bottomLeft'); 

     furniGroup.on('dragstart', function() { 
      this.moveToTop(); 
     }); 

     var yodaImg = new Kinetic.Image({ 
      x: 0, 
      y: 0, 
      image: images.yoda, 
      width: 422, 
      height: 243, 
      name: 'image' 
     }); 

     yodaGroup.add(yodaImg); 
     addAnchor(yodaGroup, 0, 0, 'topLeft'); 
     addAnchor(yodaGroup, 422, 0, 'topRight'); 
     addAnchor(yodaGroup, 422, 243, 'bottomRight'); 
     addAnchor(yodaGroup, 0, 243, 'bottomLeft'); 

     yodaGroup.on('dragstart', function() { 
      this.moveToTop(); 
     }); 

     stage.draw(); 
     } 



     var sources = { 
     furni: 'http://s29.postimg.org/yn6t21ah3/sidetable.png', 
     yoda: 'http://s28.postimg.org/58nni8dzh/blackf10.png' 
     }; 
     loadImages(sources, initStage); 





    </script> 

Answer 1

이 코드를 사용하면 이미지를 사용자 바탕 화면에서 키네틱 컨테이너 div로 끌 수 있습니다.

새 Kinetic.Image가 삭제 된 이미지에서 생성됩니다.

예 코드와 데모 : http://jsfiddle.net/m1erickson/w9onv0nm/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> 
<style> 
body{ background-color: ivory; } 
canvas{border:1px solid red;} 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 


    // drag image to the div with id='container' 
    var container=document.getElementById("container"); 
    container.addEventListener("dragover", function(e){ e.preventDefault(); }, false); 
    container.addEventListener("drop", function(e){ 
     var files = e.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 (e) { 
       var dragImage=new Image(); 
       dragImage.onload=function(){ 
        newDraggedImage(dragImage); 
       }; 
       dragImage.src=e.target.result; 
      }; 
      reader.readAsDataURL(file); 
      } 
     } 
     e.preventDefault(); 
    }, false); 


    // create a new Kinetic.Image from the dropped image 
    function newDraggedImage(img){ 
     layer.add(new Kinetic.Image({ 
      image:img, 
      draggable:true, 
     })); 
     layer.draw(); 
    } 


}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <h4>Drag an image onto the container to create a Kinetic.Image</h4> 
    <div id="container"></div><br> 
</body> 
</html> 

[가산 - 그룹에 대한 & 앵커를 생성, 이미지 삭제]

경고! 이것은 테스트되지 않은 코드입니다 ... 조정이 필요할 것입니다!

function createGroup(groupId,img,x,y){ 

    var group = new Kinetic.Group({ 
     id:groupId, 
     x:x, 
     y:y, 
     draggable: true 
    }); 
    layer.add(group); 

    var image = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image:img, 
     width:img.width, 
     height:img.height, 
     name: 'image' 
    }); 
    group.add(image); 

    addAnchor(group, 0, 0, 'topLeft'); 
    addAnchor(group, img.width, 0, 'topRight'); 
    addAnchor(group, img.width, img.height, 'bottomRight'); 
    addAnchor(group, 0, img.height, 'bottomLeft'); 

    group.on('dragstart', function() { 
     this.moveToTop(); 
    }); 

    return(group); 
}