Snap to Grid Operation usando imágenes, kinetic.js, javascript?

Question

¿Puedo implementar la operación de Snap to Grid con imágenes en Kineticjs usando jQuery?( http://jqueryui.com/demos/dragle/snap-to.html) Como tengo pocas imágenes de arrastre dentro de un lienzo y quiero que restrinjen el movimiento dentro de un lienzo ...

¿Es incluso posible que 2 imágenes se pueden juntar cuando se acerca a la otra en el lienzo? Y se puede lograr usando kinetic.js o javascript ...

gracias Ashish

Aquí está el código .. Es un poco complicado.Quiero decir, estoy cargando imágenes de fuera del lienzo ... y hay dos conjuntos ... Ahora quiero que un set pueda encajar a otro.

  <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

Presenté una respuesta a esta pregunta que no usa JQuery.En su lugar, hay un parche que puede aplicar, lo cual le da arrastrar y soltar con Snap to Grid en Kineticjs en el lienzo HTML5.

usando jQuery draggable ui¿Con Kineticjs para hacer que los elementos se ajusten a la cuadrícula?

Answer 2

Puede hacerlo diferente usando el Dragboundfunc.

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

He creado un ejemplo completo de snapping: http://jsfiddle.net/ptzsb/1/

Answer 3

Todo esto es muy posible. Sin embargo, requiere ser un poco más familiar que el usuario jquery promedio.

primero, implementando el complemento a:

Esta es una idea simple. Utiliza la biblioteca jQuery UI. Agrega la función necesaria para la función 'Snap-to', invocando 'Snap-to' en todos los elementos con la clase de 'kineticjsimage'.

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

segundo, para todas las imágenes promovidas por Kineticjs, agregamos la clase '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 mencionó en su primera pregunta, encontrará la operación de Snap-to. El segundo cuadro en la demostración en esa página utiliza el ajuste genérico (código que mencionado anteriormente, también): parámetro verdadero. Cuando lo invoca esto, le dice a la página que para ajustar todos los elementos de arrastre con la clase de 'kineticjsimage' a cualquier elemento que también se haya declarado dragle.

 $(".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.

Todo lo que desea lograr es hacer capaz de jQuery UI y las extensiones de arrastre / gotipable que se proporcionan dentro.

Tonto y trata de averiguarlo. Cuando no puedes, vuelve con el código y te mostraremos dónde ir allí. $ ("