HTML5畫布：使對象僅在畫布的特定區域中可拖動。

Question

我只是通過HTML5 Canvas教程。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/

我想拖動畫布中特定區域的對象，並且該對象不應從該區域拖出。我怎樣才能做到這一點？

Answer 1

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

你必須定義一個自定義的拖界功能來限制該對象可以被拖動。像這樣：

var yellowGroup = new Kinetic.Group({ 
     x: stage.getWidth()/2, 
     y: 70, 
     draggable: true, 
     dragBoundFunc: function(pos) { // <--- starting here 
     var x = stage.getWidth()/2; 
     var y = 70; 
     var radius = 50; 
     var scale = radius/Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2)); 
     if(scale < 1) 
      return { 
      y: Math.round((pos.y - y) * scale + y), //<--- you have to return an object like {x: number, y: number } 
      x: Math.round((pos.x - x) * scale + x) 
      }; 
     else 
      return pos; 
     } // this bounds the dragging into a circle area. 
    }); 

本質上，它只是一個數學，它決定了你可以設置一個點。