使用圖像，kinetic.js，javascript對齊網格操作？

Question

我可以使用jquery在KineticJS中使用圖像實現對齊網格操作嗎？ （ http://jqueryui.com/demos/draggable/snap-to.html ）就像我在畫布中有很少的可拖動圖像，我希望它們限制畫布內的移動...

當一個圖像在畫布中靠近另一個圖像時，它們是否可以一起拍攝？ 可以使用kinetic.js或javascript實現嗎？

謝謝Ashish

這是代碼..它有點復雜。 我的意思是我正在從畫布外面加載圖像..並且有兩套..現在我想要一套能夠捕捉到其他..

  <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

您可以使用dragBoundFunc執行此操作。

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

我創建了一個完整的對齊示例： http ： //jsfiddle.net/PTzsB/1/

Answer 2

我提交了一個不使用jQuery的問題的答案。 相反，您可以應用一個補丁，它可以在HTML5畫布上的KineticJS中使用捕捉到網格進行拖放。

使用帶有kineticJs的jquery draggable UI來使元素對齊網格？

Answer 3

這一切都很有可能。 但它需要比普通的jQuery用戶更熟悉。

首先，實現snap-to：

這是一個簡單的想法。 您使用jQuery UI庫。 通過在“KineticJsImage”類的所有元素上調用“snap-to”，可以為“snap-to”功能添加必要的功能。

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

其次，對於KineticJs傳播的所有圖像，我們添加了“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.

正如您在第一個問題中提到的，您已經找到了快照操作。 該頁面演示中的第二個框使用了通用（我上面提到的代碼）snap：true參數。 當你調用它時，你告訴頁面將所有帶有'KineticJsImage'類的可拖動元素捕捉到任何已被聲明為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.

您想要實現的一切都是使用jQuery UI和其中提供的可拖動/可放置擴展。

傻瓜，試着搞清楚。 如果你不能，請回到代碼，我們會告訴你去哪里。 $（”