我正在阅读 HTML5 Canvas 教程。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/

我想在 Canvas 的特定区域拖动一个对象，并且该对象不应从该区域拖出。我怎样才能做到这一点？

请您参考如下方法:

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. 
    }); 

从本质上讲，它只是一些决定您可以在何处设置点的数学运算。