Привязка к сетке с использованием изображений, kinetic.js, javascript? - PullRequest
Новая
       36

Привязка к сетке с использованием изображений, kinetic.js, javascript?

1 голос
/ 28 февраля 2012

Могу ли я реализовать операцию привязки к сетке с изображениями в KineticJS с помощью jquery?(http://jqueryui.com/demos/draggable/snap-to.html) Как будто у меня есть несколько перетаскиваемых изображений внутри холста, и я хочу, чтобы они ограничивали движение внутри холста ...

Возможно ли, что 2 изображения могут слипаться, когда приближается однодругой на холсте ?? И можно ли это сделать с помощью kinetic.js или javascript ...

Спасибо, Ашиш

Вот код ... он немного сложен. Я имею в виду, я "m загрузка изображений снаружи холста ... и есть два набора ... теперь я хочу, чтобы один набор мог привязываться к другому .. 

  <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>

Ответы [ 3 ]

2 голосов
/ 11 октября 2013

Вы можете сделать это по-другому, используя dragBoundFunc. 

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

Я создал полный пример привязки: http://jsfiddle.net/PTzsB/1/

1 голос
/ 10 мая 2012

Я отправил ответ на этот вопрос, который не использует jQuery.Вместо этого есть патч, который вы можете применить, который дает вам возможность перетаскивания с привязкой к сетке в KineticJS на холсте HTML5.

Использование перетаскиваемого пользовательского интерфейса jquery с kineticJs для привязки элементов к сетке?

1 голос
/ 28 февраля 2012

Это все очень возможно. Однако для этого нужно быть немного более знакомым, чем обычный пользователь jQuery.

Сначала реализуем оснастку:

Это простая идея. Вы используете библиотеку jQuery UI. Вы добавляете необходимую функцию для функции «привязки к», вызывая «привязку к» для всех элементов с классом «KineticJsImage». 

$( ".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 и предоставляемыми внутри него перетаскиваемыми / сбрасываемыми расширениями.

Дурачься и попытаться выяснить. Если вы не можете, вернитесь с кодом, и мы покажем вам, куда идти дальше. $ ( "

...