React konva 如何在react konva中裁剪图像

我正在使用react konva为我的项目制作动画。我使用transformer来调整图像大小，并使用裁剪功能来裁剪图像，但它不能正确裁剪图像。我在那一点上被卡住了。我在图片的onTransform事件中将裁剪代码放在下面。我想达到这里给出的结果”https://codepen.io/Ponomarev/pen/yLLXNLN?editors=0010“我也试着安装另一个变压器，但没有任何效果。任何帮助都将不胜感激，谢谢

 const handleTransform = (e) => {
    if (selectedObject.crop == true) {
      debugger;
      layer = imageRef.current.getLayer();
      setHover(false);
      var img = e.target;
      transformRef.current.setAttrs({
        borderDash: [5, 5],
        anchorSize: 21,
        anchorCornerRadius: 11,
      });
      img.setAttrs({
        scaleX: 1,
        scaleY: 1,
        width: img.width() * img.scaleX(),
        height: img.height() * img.scaleY(),
      });

      const crop = getCrop(img.image(), {
        width: img.width(),
        height: img.height(),
      });
      setHover(false);
      img.setAttrs(crop);
      layer.draw();
    }
  };

  // function to calculate crop values from source image.
  function getCrop(image, size) {
    const width = size.width;
    const height = size.height;
    const aspectRatio = 1 / 1;

    let newWidth;
    let newHeight;
    let x = 0;
    let y = 0;

    const imageRatio = image.width / image.height;

    if (aspectRatio >= imageRatio) {
      newWidth = image.width * aspectRatio;
      newHeight = image.height / aspectRatio;
    } else {
      newWidth = image.width * aspectRatio;
      newHeight = image.height / aspectRatio;
    }

    x = image.height / newHeight;
    y = (image.height - newHeight) / 2;

    newWidth = width;
    newHeight = height;

    return {
      cropX: x,
      cropY: y,
      cropWidth: newWidth,
      cropHeight: newHeight,
    };
  }

//Render

 return (
    <React.Fragment>
      {/* =========================== CONTEXT =========================== */}
      <DOMWrapper>
        <ContextMenu
          className="custom-context-menu"
          model={items}
          ref={contextRef}
          appendTo={document.body}
          style={{
            position: "absolute",
            top: contextMenuCoord.y,
            left: contextMenuCoord.x,
          }}
        />
      </DOMWrapper>
      {/* =========================== IMAGE =========================== */}
      <Image
        // General
        image={image}
        ref={imageRef}
        // Positioning
        x={object.settings.x}
        y={object.settings.y}
        // Transforms
        width={newRatio?.width}
        height={newRatio?.height}
        rotation={object.settings?.rotation}
        offsetX={object.settings.offsetX}
        offsetY={object.settings.offsetY}
        skewX={object.settings.skewX}
        skewY={object.settings.skewY}
        scaleX={1 * (object.filters?.flipH ? -1 : 1)}
        scaleY={1 * (object.fitlers?.flipV ? -1 : 1)}
        draggable
        // Events
        onClick={handleClick}
        onTap={handleClick}
        onDragEnd={updatePosition}
        onMouseEnter={() => !isSelected && setHover(true)}
        onMouseLeave={() => setHover(false)}
        onContextMenu={handleContext}
        onTransform={handleTransform}
        // Filters
        filters={[
          Konva.Filters.Brighten,
          Konva.Filters.Contrast,
          Konva.Filters.HSL,
          Konva.Filters.Blur,
          Konva.Filters.Pixelate,
          Sharpen,
        ]}
        // Filter Settings
        brightness={object.filters?.brightness / 100 || 0}
        contrast={object.filters?.contrast / 2 || 0}
        saturation={object.filters?.saturation / 10 || 0}
        hue={object.filters?.hue || 0}
        blurRadius={object.filters?.blur || 0}
        pixelSize={object.filters?.pixelate || 1}
      />
      {/* ======================= TRANSFORMER ======================= */}
      {hover && (
        <Transformer
          ref={hoverRef}
          resizeEnabled={false}
          rotateEnabled={false}
          onTransformEnd={handleTransformEnd}
          anchorStroke={"#869ee3"}
          anchorCornerRadius={15}
          anchorStrokeWidth={1}
          anchorSize={10}
          boundBoxFunc={(oldBox, newBox) => {
            // limit resize
            if (newBox.width < 5 || newBox.height < 5) {
              return oldBox;
            }
            return newBox;
          }}
        />
      )}
      {isSelected && (
        <Transformer
          ref={transformRef}
          keepRatio={false}
          resizeEnabled={true}
          rotateEnabled={true}
          onTransformEnd={handleTransformEnd}
          anchorStroke={"#869ee3"}
          anchorCornerRadius={15}
          anchorStrokeWidth={1}
          anchorSize={10}
          ignoreStroke={true}
          boundBoxFunc={(oldBox, newBox) => {
            // limit resize
            if (newBox.width < 5 || newBox.height < 5) {
              return oldBox;
            }
            return newBox;
          }}
        />
      )}
    </React.Fragment>
  );

const handleTransform=（e）=>{
if（selectedObject.crop==true）{
调试器；
layer=imageRef.current.getLayer（）；
setHover（假）；
var img=e.目标；
transformRef.current.setAttrs({
borderDash:[5,5]，
主播：21，
主播：11，
});
img.setAttrs({
scaleX:1，
斯卡利：1，
宽度：img.width（）*img.scaleX（），
高度：img.height（）*img.scaleY（），
});
常量裁剪=获取裁剪（img.image（）{
宽度：img.width（），
高度：img.height（），
});
setHover（假）；
img.setAttrs（作物）；
layer.draw（）；
}
};
//函数从源图像计算裁剪值。
函数getCrop（图像、大小）{
常量宽度=size.width；
const height=size.height；
常量aspectRatio=1/1；
让新的宽度；
让新高度；
设x=0；
设y=0；
常量imageRatio=image.width/image.height；
如果（aspectRatio>=imageRatio）{
newWidth=image.width*aspectRatio；
newHeight=image.height/aspectRatio；
}否则{
newWidth=image.width*aspectRatio；
newHeight=image.height/aspectRatio；
}
x=image.height/newHeight；
y=（image.height-newHeight）/2；
新宽度=宽度；
新高度=高度；
返回{
cropX:x，
克罗比：是的，
cropWidth:newWidth，
克罗菲特：新高度，
};
}
//渲染
返回(
{/*=======================================================================================================*/}
{/*==========================================================================================================*/}
！isSelected&&setHover（true）}
onMouseLeave={（）=>setHover（false）}
onContextMenu={handleContext}
onTransform={HandletTransform}
//过滤器
过滤器={[
Konva.Filters.Brighlight，
Konva.Filters.Contrast，
Konva.Filters.HSL，
Konva.Filters.Blur，
Konva.Filters.Pixelate，
锐化
]}
//过滤器设置
亮度={object.filters？.brightness/100 | | 0}
对比度={object.filters？.contrast/2 | | 0}
饱和度={object.filters？.saturation/10 | | 0}
色调={object.filters？.hue | | 0}
blurRadius={object.filters？.blur | | 0}
pixelSize={object.filters？.pixelate | | 1}
/>
{/*===========================================================================================*/}
{悬停&&(
{
//限制调整大小
if（新箱宽度<5 | |新箱高度<5）{
返回旧框；
}
退换新箱；
}}
/>
)}
{isSelected&&(
{
//限制调整大小
if（新箱宽度<5 | |新箱高度<5）{
返回旧框；
}
退换新箱；
}}
/>
)}
);

如果您正在尝试，是否可以制作一个完整的小型演示？