Html5 canvas HTML5画布：使对象只能在画布的特定区域中拖动。

我正在学习HTML5画布教程。

我想在画布中的特定区域拖动一个对象，而该对象不应从该区域拖动出去。我如何才能做到这一点？

您必须定义一个自定义的拖动边界函数来限制可以拖动对象的位置。像这样：

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

var yellowGroup=新的动力学组({
x:stage.getWidth（）/2，
y:70，
真的，
dragBoundFunc:函数（pos）{//