如何在React Konva中将dragBoundFunc用于多边形

Question

我想在React Konva中将我的多边形运动限制在Image中。当我移动多边形时，它会移出不需要的图像。我在onDragEnd中限制运动，但是它不是最佳的。我曾尝试使用dragBoundFunc，但无法正常工作。我使用了dragBoundFunc，但它没有按我的要求工作。请帮助我了解我该怎么办。

  handlePolygonDragEnd (e) {

      // Calculating new Position of Points
      for (var i = 0; i < polygon.points.length; i++) {
        polygon.points[i].cx += e.target._lastPos.x - 1;
        polygon.points[i].cy += e.target._lastPos.y - 1;
        polygon.points[i].radius = 3;

        // Bounding the draw of Polygon
        if (polygon.points[i].cx < 0) {
          for (var k = 0; k < polygon.points.length; k++) {
            var distance = Math.abs(polygon.points[i].cx - polygon.points[k].cx);

            if (k === i) {
              continue;
            }

            polygon.points[k].cx = distance;
          }
          polygon.points[i].cx = 1.5;
        }

        if (new_polygon_list[ind].points[i].cy < 0) {
          for (var k = 0; k < polygon.points.length; k++) {
            var distance = Math.abs(polygon.points[i].cy - polygon.points[k].cy);

            if (k === i) {
              continue;
            }

            polygon.points[k].cy = distance;
          }
          polygon.points[i].cy = 1.5;
        }

        if (polygon.points[i].cx > this.props.width) {
          for (var k = 0; k < polygon.points.length; k++) {
            var distance = Math.abs(polygon.points[i].cx - polygon.points[k].cx);

            if (k === i) {
              continue;
            }

            polygon.points[k].cx = this.props.width - distance;
          }
          polygon.points[i].cx = this.props.width - 1.5;
        }

        if (polygon.points[i].cy > this.props.height) {
          for (var k = 0; k < polygon.points.length; k++) {
            var distance = Math.abs(polygon.points[i].cy - polygon.points[k].cy);

            if (k === i) {
              continue;
            }

            polygon.points[k].cy = this.props.height - distance;
          }
          polygon.points[i].cy = this.props.height -1.5;
        }
      }

      this.setState ({polygon});
  }

             <Line
                points={this.state.points}
                closed
                onDragEnd={this.props.DragEnd}
                dragBoundFunc={() => {
                    var points;
                    points = this.props.pointerss;

                    for (var i = 0; i < points; i += 2) {
                        if (points[i] < 0) {
                            points[i] = 0;
                        }

                        if (points[i+1] < 0) {
                            points[i+1] = 0;
                        }
                    }

                    return {
                        points : points,
                    }
                }}
                />