Operação de ajuste à grade usando imagens, kinetic.js, javascript?

Question

Posso implementar a operação Snap to Grid com imagens no Kineticjs usando o jQuery?(http://jqueryui.com/demos/draggable/snap-to.html) Como eu tenho poucas imagens arrastáveis ​​dentro de uma tela e quero que elas restrinjam o movimento dentro de uma tela ...

É possível que 2 imagens se encaixem quando uma se aproxima da outra na tela?E isso pode ser alcançado usando kinetic.js ou javascript...

Obrigado Ashish

Aqui está o código..é um pouco complicado.Quer dizer, estou carregando imagens de fora da tela..e há dois conjuntos..agora quero que um conjunto possa ser encaixado em outro..

  <script src="kinetic-v3.8.0.min.js">
  </script>
  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>



    <script>
        function drawImage(imageObj){

            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 200 / 2;
            var y = stage.height / 2 - 137 / 2;
            var width = 200;
            var height = 137;

            // darth vader
            var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();

                context.clearRect(x,y,width,height);
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath(); 


          });

            // enable drag and drop
            darthVaderImg.draggable(true);

            // add cursor styling
            darthVaderImg.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg);


            layer.draw();
                });
            layer.add(darthVaderImg);
            stage.add(layer);

            //events

        }


         function drawImage2(imageObj){

            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();

            var x = stage.width / 2 - 300 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;

            // darth vader

            var darthVaderImg2 = new Kinetic.Shape(function(){
                var context = this.getContext();

                context.drawImage(imageObj, x, y, width, height);

                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();

            });

            // enable drag and drop
            darthVaderImg2.draggable(true);

            // add cursor styling
            darthVaderImg2.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg2.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg2.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg2);


            layer.draw();



                   });
                layer.add(darthVaderImg2);

             stage.add(layer);



          $( ".darthVaderImg2" ).draggable({ grid: [ 20,20 ] });

             }



               function load(img){
                 // load image

                 var imageObj = new Image();
                 imageObj.onload = function(){

                drawImage(this);

                  };
                   imageObj.src = img.src;
                    };
                 function load2(img){
             // load image
                 var imageObj = new Image();
                imageObj.onload = function(){
                drawImage2(this);
               };
               imageObj.src = img.src;
                 };
             </script>
            <title>HTMl5 drag drop multiple elements</title></head>
             <body onmousedown="return false;">
              <div id="container">
              </div>
             <div id="check1">
            <ul id="img"> <li><a href="#"onclick="load(document.getElementById('i1'))">
            <img class="ui-widget-header" src="dog.png" id="i1" alt="doggie"     width="60"height="55"/>
      </a></li>
      <li>
        <a href="#" onclick="load(document.getElementById('i2'))">
        <img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55"        /></a>
    </li>
    </ul>
    </div>
    <ul id="img1">
        <li><a href="#" onclick="load2(document.getElementById('i4'))">
            <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
             </a></li>
             <li><a href="#" onclick="load2(document.getElementById('i5'))">
        <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
       </ul>
       </body>
        </html>

Answer 1

Enviei uma resposta a esta pergunta que não usa jQuery.Em vez disso, há um patch que você pode aplicar que permite arrastar e soltar com encaixe na grade no KineticJS na tela HTML5.

Usando jquery UI arrastável com kineticJs para fazer os elementos se encaixarem na grade?

Answer 2

Você pode fazer isso de forma diferente usando dragBoundFunc.

      return {
        x: Math.round(pos.x / grid) * grid,
        y: Math.round(pos.y / grid) * grid
      }

Eu criei um exemplo completo de ajuste: http://jsfiddle.net/PTzsB/1/

Answer 3

Tudo isso é muito possível.No entanto, é necessário estar um pouco mais familiarizado do que o usuário médio do jQuery.

Primeiro, implementando o snap-to:

Esta é uma ideia simples.Você usa a biblioteca jQuery UI.Você adiciona a função necessária para o recurso 'encaixar', invocando 'encaixar' em todos os elementos com a classe 'KineticJsImage'.

$( ".KineticJsImage" ).draggable({ snap: true });

Segundo, para todas as imagens propagadas pelo KineticJs, adicionamos a classe ‘KineticJsImage’

..I don't have anything to work with here...
You simply need to find where the image output is controlled and add a class
of KineticJsImage to the code.

Como você mencionou na sua primeira pergunta, você encontrou a operação snap-to.A segunda caixa na demonstração dessa página usa o snap genérico (código que mencionei acima também):parâmetro verdadeiro.Ao invocar isso, você está dizendo à página para encaixar todos os elementos arrastáveis ​​com a classe 'KineticJsImage' para QUALQUER elemento que TAMBÉM tenha sido declarado draggle.

 $(".someElement").draggable({ snap: false }); // drags wherever, does not snap.
 $(".KineticJsImage").draggable({snap: true }); // drags everywhere, snaps to anything.
 $(".KineticJsImage").draggable({snap: '.KineticJsImage' }); // This will ensure that
 any element with the class of 'KineticJsImage' is not only draggable, but will snap
 to any other element with the class of' 'KineticJsImage' that is also draggable.

Tudo o que você deseja alcançar é possível com o jQuery UI e as extensões arrastáveis/soltáveis ​​fornecidas.

Brinque e tente descobrir.Quando não puder, volte com o código e mostraremos para onde ir a partir daí.$("