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

Question

我是 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",
    lockScalingFlip: true,
    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,
      maskname: "rect",
      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, 0, 0, retina, 0, 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,
        0,
        0,
        thisObj.width,
        thisObj.height,
        x,
        y,
        thisObj.width,
        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 函数，现在我想限制形状区域中的图像。顶部和左侧工作正常，但右侧和底部不平滑。请帮忙