Opération SNAP à la grille à l'aide d'images, kinetic.js, javascript?

Question

Puis-je implémenter le fonctionnement SNAP TO GRID avec des images dans KineticJS à l'aide de jQuery? (http://jqueryui.com/demos/draggable/snap-to.html) Comme j'ai quelques images dragables à l'intérieur d'une toile et je veux qu'elles restreignent le mouvement à l'intérieur d'une toile ...

Est-il même possible que 2 images puissent s'enclencher lorsque l'une s'approche de l'autre dans la toile ?? Et peut-il être réalisé en utilisant kinetic.js ou javascript ...

Merci Ashish

Voici le code .. c'est un peu compliqué. Je veux dire que je charge des images de l'extérieur de la toile ... et il y a deux ensembles ... maintenant je veux qu'un ensemble puisse se casser à d'autres.

  <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

J'ai soumis une réponse à cette question qui n'utilise pas jQuery. Au lieu de cela, il y a un patch que vous pouvez appliquer qui vous donne un glisser-déposer avec un snap à la grille en kineticjs sur la toile HTML5.

Utilisation de l'interface utilisateur jQuery Draggable avec KineticJS pour faire en sorte que les éléments nettent la grille?

Answer 2

Vous pouvez le faire différent en utilisant le dragboundfunc.

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

J'ai créé un exemple de capture complet: http://jsfiddle.net/ptzsb/1/

Answer 3

Tout cela est très possible. Cela nécessite cependant d'être un peu plus familier que l'utilisateur de jQuery moyen.

Tout d'abord, la mise en œuvre du snap-to:

C'est une idée simple. Vous utilisez la bibliothèque JQuery UI. Vous ajoutez la fonction nécessaire pour la fonction «snap-to», en invoquant «snap-to» sur tous les éléments avec la classe de «kineticjsimage».

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

Deuxièmement, pour toutes les images proportées par KineticJS, nous ajoutons 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.

Comme vous l'avez mentionné dans votre première question, vous aviez trouvé l'opération Snap-to. La 2ème boîte de la démo de cette page utilise le paramètre générique (code que j'ai mentionné ci-dessus) SNAP: True. Lorsque vous invoquez cela, vous dites à la page de prendre tous les éléments draggables avec la classe de «kineticjsimage» à tout élément qui a également été déclaré 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.

Tout ce que vous voulez réaliser est de faire avec jQuery UI et les extensions Draggable / Droppable fournies à l'intérieur.

Fermer et essayer de comprendre. Quand vous ne pouvez pas, revenez avec le code et nous vous montrerons où aller à partir de là. $ ("