画像、Kinetic.js、JavaScriptを使用してグリッド操作にスナップしますか？

Question

KineticJSの画像でグリッド操作にスナップを実装できますか jQueryを使う？（ http://jqueryui.com/demos/draggable/snap-to.htmlud/a.>） キャンバスの中にドラッグ可能な画像がほとんどないように、キャンバスの内側の動きを制限してほしい...

は、キャンバスのもう一方に近づくと、2つの画像が一緒にスナップできる可能性さえありますか。 そしてKinetic.jsまたはJavaScriptを使用して実現できます...

感謝 Ashish

これはコードです。 それは少し複雑です。私はキャンバスの外側から画像を読み込んでいます。そして2つのセットがあります。

  <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キャンバスのKineticJSでスナップをスナップにドラッグアンドドロップするパッチがあります。

jQuery Draggable Uiを使用してElementsをグリッドにスナップさせるためのKineThjsを使用して？

Answer 2

DragboundFuncを使用してこの異なることができます。

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

.

完全なスナップの例を作成しました： http://jsfiddle.net/ptzsb/1/d/a>

Answer 3

これはすべて非常に可能です。それは平均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.

.

あなたの最初の質問で述べたように、あなたはスナップツー操作を見つけるでしょう。そのページのデモの2番目のボックスは、一般的な（上記のコードiも上記のコードi、trueパラメータ）を使用します。これを呼び出すと、ドラッグル宣言された任意の要素に「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.

.

あなたが達成したいすべてのものは、jQuery UIと内蔵されているドラッグ可能/ roppable拡張機能を持っています。

愚か者を騙して把握しようとします。できないときは、コードに戻って戻ってきて、そこからどこに行く場所を見せます。 $（ "