我已经使用Clipping Now我想限制图像在布料Js中穿过矩形的右上角或矩形的底部后的移动

如何解决我已经使用Clipping Now我想限制图像在布料Js中穿过矩形的右上角或矩形的底部后的移动

我是Fabric的新手，我为图像创建了一个矩形形状和clipTo函数，现在我想将图像限制在形状区域中。顶部和左侧工作正常，但右侧和底部不平滑。请帮助

https://jsfiddle.net/mg73n0eq/154/#&togetherjs=Qh6LnTRHFq

let canvas = new fabric.Canvas(
"ast",{
        width: 400,height: 400,selection: true,id: "ast",//selectionBorderColor: "green",backgroundColor: "#ffffff",preserveObjectStacking: true,uniScaleTransform: true,//cornerSize: 40,lockScalingFlip: true,controlsAboveOverlay: true,subTargetCheck: true,hoverCursor: "pointer",stateful: true,},null,"anonymous"
    );
    
   var Rect = new fabric.Rect({
    width: 250,height: 250,fixed: true,fill: "#000",scaleX: 1,scaleY: 1,top:0,left:0,maskname: "rect",absolutePositioned: true,stroke: "1",lockUniScaling: true,minScaleLimit: 0.1,});

 canvas.add(Rect);

 function rectMask(canvas) {
 
  //Rect.viewportCenter();
  
  
  let pugImg = new Image();
  pugImg.crossOrigin = "anonymous";
  pugImg.src ="https://posterapplab.com/api/images/photos/ZaJprCvDjVA.png";

  //console.log(size.zoom);
  pugImg.onload = function (img) {
    let pug = new fabric.Image(pugImg,{
      crossOrigin: "anonymous",scaleX:0.3,scaleY:0.3,top: 20,left: 10,clipPath: Rect,clipTo: function (ctx) {
        clipMyObject(this,ctx);
      },});
    pug.crossOrigin = "anonymous";
    pug.backgroundVpt = false;
    pug.setControlsVisibility({
      mt: false,mb: false,});
    canvas.add(pug);
    canvas.renderAll();
  };

}

 function clipMyObject(thisObj,ctx) {
  if (thisObj.clipPath) {
    ctx.save();
    if (thisObj.clipPath.fixed) {
      var retina = thisObj.canvas.getRetinaScaling();
      ctx.setTransform(retina,retina,0);
      // to handle zoom
      ctx.transform.apply(ctx,thisObj.canvas.viewportTransform);
      thisObj.clipPath.transform(ctx);
    }

    thisObj.clipPath._render(ctx);
    ctx.restore();
    ctx.clip();
    var x = -thisObj.width / 2,y = -thisObj.height / 2,elementToDraw;

    if (
      thisObj.isMoving === false &&
      thisObj.resizefilter &&
      thisObj._needsResize()
    ) {
      thisObj._lastScaleX = thisObj.scaleX;
      thisObj._lastScaleY = thisObj.scaleY;
      thisObj.applyResizefilters();
    }
    elementToDraw = thisObj._element;
    elementToDraw &&
      ctx.drawImage(
        elementToDraw,thisObj.width,thisObj.height,x,y,thisObj.height
      );
    thisObj._stroke(ctx);
    thisObj._renderstroke(ctx);
  }
}


 rectMask(canvas);
 
 canvas.on("object:moving",(e) => {

      if (
        e.target &&
        e.target.type === "image" &&
        e.target.maskname
      ) {
        //obj.canvas.lastScaleY = obj.scaleY;
        //obj.canvas.lastScaleX = obj.scaleX;
        let bound = Rect.getBoundingRect();
        let selectedBound = e.target.getBoundingRect();
       
        //selectedobject.set("left",0);
        //console.log(bound.width);
        // console.log(bound.height);

        if (e.target.left > Rect.left) {
          
          e.target.set("left",Rect.left);
        }
        if (e.target.top > Rect.top) {
         e.target.set("top",Rect.top);
        }
       
        var right = Rect.left + Rect.getBoundingRect().width / 2;
        var bottom = Rect.top + Rect.getBoundingRect().height / 2;

        if (right > e.target.left + e.target.width / 2) {
          //Solution one
          e.target.set("left",Rect.left - Rect.width);
        }

        if (bottom > e.target.top + e.target.height / 2) {
          e.target.set("top",Rect.top - Rect.height / 2);
        }
        // console.log(selectedobject);

        /*if (selectedBound.left + selectedBound.width < bin.width) {
          console.log("hjfhsafdhagsdf");
          selectedobject.set("left",bin.left - bin.width / 2);
        }*/
      }
    });

我是Fabric的新手，我为图像创建了一个矩形形状和clipTo函数，现在我想将图像限制在形状区域中。顶部和左侧工作正常，但右侧和底部不平滑。请帮助