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

Question

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

Это даже возможно, что 2 изображения могут быть объединены, когда находятся рядом с другим в холсте ?? И может быть достигнуто с помощью 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

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

Использование JQuery Draggreate uiС Kinetics, чтобы сделать элементы, привязанные к сетке?

Answer 2

Вы можете сделать это отличаться с помощью DragBoundFunc.

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

.

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

Answer 3

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

Во-первых, реализуя оснастку:

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

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

.

Во-вторых, для всех изображений, которые продерживаются Kinetics, мы добавляем класс '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.

.

Как вы упоминали в своем первом вопросе, вы нашли операцию оснастки. 2-я коробка в демонстрации на этой странице используется универсальный (код, который я упоминал выше, а также) Snap: True Parameter. Когда вы призываете это, вы говорите страницу, чтобы открыть все элементы перетаскивания с классом «Kineticjsimage» к любому элементу, который также был объявлен перетягиванием.

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

.

Все, что вы хотите добиться, выполняет возможность с UI jQuery ui и расширениями Draggable / dreampable, предоставляемых внутри.

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