Using jquery draggable UI with kineticJs to make elements snap to grid?

StackOverflow https://stackoverflow.com/questions/9495610

質問

I'm new to jquery I have implemented drag and drop operation using Kinetic.js I have some images in html and I'm passing them to a javascript function and making them draggable..There are two sets of images.. Now I want to make them snap to each other if they get near. I'm new to jquery so I don't know how can I pass the kinetic js image variable into a jquery operation where they have passed the img id tag. Also I'm not able to figure out where to place the jquery function and how..

Here is the code.. Someone please help..

        <html>
            <head>
                  <style>

           canvas {
                border: 1px solid #9C9898;
                    }

            #img
                {
                position:absolute;
                left:700px;
                top:150px;
                }
            #img1
                {
                position:absolute;
                left:800px;
                top:150px;
                }
    </style>

Loading jquery libraries

    <script src="kinetic-v3.8.0.min.js"></script>
    <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>

Kinetic.js- to load image and make em draggable

    <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.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image

Need some help with this jquery function how to use it and pass the kinetic js draggable image here

                $(function() {
                $(this).draggable({ grid: [ 80, 80 ] });
                });

                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();  
          });

draggable function

            // 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);
          }



        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>

Html defining operation on image click

            <title>HTMl5 drag drop multiple elements</title></head>
            <body onmousedown="return false;">
            <div id="container">
                </div>
             <div id="check1">
            <ul id="img" class="draggable ui-widget-content"    > <li><a href="#" class="draggable ui-widget-content" onclick="load(document.getElementById('i1'))">
            <img src="dog.png" id="i1" class="draggable ui-widget-content" 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>
役に立ちましたか？

解決

I was able to modify kinetic-v3.9.3.js to enable dragging with snap-to with the following patch (diff format):

813a814,825
>      * set drag grid constraint
>      */
>     setDragGridConstraint: function(constraint) {
>         this.attrs.dragGridConstraint = constraint;
>     },
>     /**
>      * get drag grid constraint
>      */
>     getDragGridConstraint: function() {
>         return this.attrs.dragGridConstraint;
>     },
>     /**
1847a1860,1861
>                     var dgc = node.attrs.dragGridConstraint;
>                     
1858a1873,1877
>                     if(dgc !== undefined) {
>                         newNodePos.x = Math.floor(newNodePos.x/dgc.x)*dgc.x + (dgc.x/2);
>                         newNodePos.y = Math.floor(newNodePos.y/dgc.y)*dgc.y + (dgc.y/2);
>                     }
>

To set this up for something like a rect, make sure you set draggable to true on your entity, then you can use setDragGridConstraint() to set up your snap to distances as below.

        var box = new Kinetic.Rect({
            x: rectX,
            y: rectY,
            width: 100,
            height: 50,
            fill: "#00D2FF",
            stroke: "black",
            strokeWidth: 4,
            draggable: true
        });

        box.setDragGridConstraint({x: 50 , y: 50});

他のヒント

This is a bit old, but, instead of making a patch, you could do something like this:

var isNearSnapArea = function(image, snapArea) {
          if (image.attrs.x > snapArea.x - 30 && image.attrs.x < snapArea.x + 30 && image.attrs.y > snapArea.y - 30 && image.attrs.y < snapArea.y + 30) {
            return true;
          } else {
            return false;
          }
        }    
var isNearObjectSnapArea = function(image, layer, callback) {
              // What the new object will snap to if it is near it
              var snapTo = { 'x': image.attrs.x, 'y': image.attrs.y };
              for (var x = 0; x < layer.children.length; x++) {
                var myObject = { 'x': layer.children[x].attrs.x, 'y': layer.children[x].attrs.y, '_id': layer.children[x]._id }
                if(isNearSnapArea(image, myObject) && image._id !== myObject._id) {
                  snapTo.x = myObject.x;
                  snapTo.y = myObject.y + 30;
                  callback(snapTo);
                  return;
                }
              }
            }

//Then, later in your program:

image.on('dragend', function() {
                  isNearObjectSnapArea(image, layer, function(snapTo) { 
                    image.attrs.x = snapTo.x;
                    image.attrs.y = snapTo.y;
                    layer.draw();
                  }); 
                });

There is probably a better way of doing this, but this works.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top