要解决此问题，您可以使用sceneFunction：

<Image
        
        sceneFunc={(context, shape) => {
          const width = shapeProps.width;
          const height = shapeProps.height;
          if (
            perPageOutlineColor?.filter(
              (item) => item.page == pageCurrent + 1
            )[0]?.color
          ) {
            // Outer stroke
            context.beginPath();
            context.moveTo(-10, -10);
            context.lineTo(width + 10, -10);
            context.lineTo(width + 10, height + 10);
            context.lineTo(-10, height + 10);
            context.closePath();
            context.strokeStyle = perPageOutlineColor?.filter(
              (item) => item.page == pageCurrent + 1
            )[0]?.color;
            context.lineWidth = 16;
            context.stroke();
          }

          // Calculate the dimensions of the inner rectangle
          const innerWidth = width - 4 * stroke;
          const innerHeight = height - 4 * stroke;
          const innerX = 2 * stroke;
          const innerY = 2 * stroke;

          // Inner stroke
          context.beginPath();
          context.moveTo(innerX, innerY);
          context.lineTo(innerX + innerWidth, innerY);
          context.lineTo(innerX + innerWidth, innerY + innerHeight);
          context.lineTo(innerX, innerY + innerHeight);
          context.closePath();
          context.strokeStyle =  perPageOutlineColor?.filter(
            (item) => item.page == pageCurrent + 1
          )[0]?.color? "white":color?.framecolor; // Replace with the desired color for the inner stroke
          context.lineWidth = stroke;
          context.stroke();
        
          if (perPageOutlineColor?.filter(
            (item) => item.page == pageCurrent + 1
          )[0]?.color) {
               context.fillStyle=color?.framecolor;
          context.fillRect(innerX - 2*stroke-2, innerY - 2*stroke-2, width+4, height+4)
      
          }

          // Draw the image if it is loaded
          if (image) {
            context.drawImage(image, innerX, innerY, innerWidth, innerHeight);
          }

          context.fillStrokeShape(shape);
        }}
        // stroke={perPageFrameColor?.filter((item) => item.page == pageCurrent+1)[0]?.framecolor}
        // stroke={color?.framecolor}
        strokeWidth={stroke}
        onClick={onSelect}
        onTap={onSelect}
        
        ref={shapeRef}
        {...shapeProps}
        draggable
        onDragEnd={(e) => {
          onChange({
            ...shapeProps,
            x: e.target.x(),
            y: e.target.y(),
          });
        }}
        onTransformEnd={(e) => {
          // transformer is changing scale of the node
          // and NOT its width or height
          // but in the store we have only width and height
          // to match the data better we will reset scale on transform end
          const node = shapeRef.current;
          const scaleX = node.scaleX();
          const scaleY = node.scaleY();

          // we will reset it back
          node.scaleX(1);
          node.scaleY(1);
          setDrag({
            ...drag,
            x: node.x(),
            y: node.y(),
          });
          onChange({
            ...shapeProps,
            x: node.x(),
            y: node.y(),
            // set minimal value
            width: Math.max(5, node.width() * scaleX),
            height: Math.max(node.height() * scaleY),
          });
        }}
        image={image}
        onDragStart={() => {
          setDrag({
            isDragging: true,
          });
        }}
      />

实现取决于您。