Funzionamento a scatto a griglia usando immagini, kinetic.js, javascript?

Question

Posso implementare il funzionamento a scatto a Grid con immagini in Kineticjs usando jQuery?( http://jqueryui.com/demos/draggable/snap-to.html Come ho poche immagini trascinabili all'interno di una tela e li voglio limitare il movimento all'interno di una tela ...

è anche possibile che 2 immagini possano scattare insieme quando si arriva vicino all'altro nella tela ?? E può essere raggiunto usando Kinetic.js o JavaScript ...

Grazie Ashish

Ecco il codice .. È un po 'complicato.Voglio dire che sto caricando immagini dall'esterno della tela ... e ci sono due set ... ora voglio che un set sia in grado di scattare ad altro ..

  <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

Ho inviato una risposta a questa domanda che non usa jQuery.Invece, c'è una patch che puoi applicare quale ti dà trascinare e rilasciare con Snap to Grid in KineticJs sulla tela HTML5.

Uso di JQuery Draggable UIcon kineticjs per rendere gli elementi snap alla griglia?

Answer 2

Puoi farlo diverso utilizzando il draggeroundfunc.

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

.

Ho creato un esempio di scatto completo: http://jsfiddle.net/ptzsb/1/

Answer 3

Questo è tutto molto possibile. Richiede essere un po 'più familiare dell'utente di jQuery medio, però.

In primo luogo, implementando lo Snap-to

Questa è una semplice idea. Usi la libreria JQuery UI. Si aggiunge la funzione necessaria per la funzione 'Snap-to', invocando 'Snap-to' su tutti gli elementi con la classe di "KineticJsimage".

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

.

Secondo, per tutte le immagini propogato da Kineticjs, aggiungiamo la 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.

.

Come hai detto nella tua prima domanda, hai trovato il funzionamento a scatto. La 2a scatola nella demo su quella pagina utilizza il generico (codice che ho menzionato sopra, pure) Snap: True PARAMETER. Quando richiami questo, stai dicendo alla pagina di scattare tutti gli elementi trascinabili con la classe di "kineticjsimage" a qualsiasi elemento che è stato dichiarato anche Draftgle.

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

.

Tutto ciò che si desidera ottenere è fare in grado con l'interfaccia utente jQuery e le estensioni trascinabili / dropbable fornite all'interno.

Gallotto e prova a capire. Quando non puoi, torna con il codice e ti mostreremo dove andare da lì. $ ("