How to use the konva.Image function in konva

y: 80,
        width: 100,
        height: 20,
        fillLinearGradientStartPoint: {
          x: 0,
          y: 80,
        },
        fillLinearGradientEndPoint: {
          x: 100,
          y: 80,
        },
        stroke: self.options.tooltip.stroke,
        strokeWidth: 1,
      }),

      image: new Konva.Image({
        stroke: '#D2D2D2',
        strokeWidth: 1,
      }),
    };

    self.paths_ref = {
      zoom_icon: 'M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM15.687,9.051h-4v2.833H8.854v4.001h2.833v2.833h4v-2.834h2.832v-3.999h-2.833V9.051z',
      unzoom_icon: 'M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM8.854,11.884v4.001l9.665-0.001v-3.999L8.854,11.884z',
      lightbulb: 'M15.5,2.833c-3.866,0-7,3.134-7,7c0,3.859,3.945,4.937,4.223,9.499h5.553c0.278-4.562,4.224-5.639,4.224-9.499C22.5,5.968,19.366,2.833,15.5,2.833zM15.5,28.166c1.894,0,2.483-1.027,2.667-1.666h-5.334C13.017,27.139,13.606,28.166,15.5,28.166zM12.75,25.498h5.5v-5.164h-5.5V25.498z',
    };

    // start plugin
    self.init();
  }

globals.layers.get('UI')!.add(globals.elements.noDoubleDiscardBorder);

    // The faded rectangle around the trash can
    const discardAreaRect = new Konva.Rect({
        x: 0.8 * winW,
        y: 0.6 * winH,
        width: 0.19 * winW,
        height: 0.39 * winH,
        fill: 'black',
        opacity: 0.2,
        cornerRadius: 0.01 * winW,
    });
    globals.layers.get('UI')!.add(discardAreaRect);

    // The trash can icon over the discard pile
    const trashcan = new Konva.Image({
        x: 0.82 * winW,
        y: 0.62 * winH,
        width: 0.15 * winW,
        height: 0.35 * winH,
        opacity: 0.2,
        image: globals.ImageLoader!.get('trashcan')!,
    });
    globals.layers.get('UI')!.add(trashcan);

    // This is the invisible rectangle that players drag cards to in order to discard them
    globals.elements.discardArea = new ClickArea({
        x: 0.8 * winW,
        y: 0.6 * winH,
        width: 0.2 * winW,
        height: 0.4 * winH,
    });

constructor(config: Konva.ContainerConfig) {
        super(config);
        this.listening(true);

        this.cardBack = new Konva.Image({
            x: 0,
            y: 0,
            width: this.width(),
            height: this.height(),
            image: globals.cardImages.get('deck-back')!,
        });
        this.add(this.cardBack);
        this.cardBack.on('dragend', this.dragEnd);

        // The text that shows the number of cards remaining in the deck
        this.numLeftText = new Konva.Text({
            fill: 'white',
            stroke: '#222222',
            strokeWidth: 3,
            align: 'center',
            x: 0,

_shapeFactory () {
    const _canvas = this._canvasFactory()
    const shape = new Konva.Image({
      image: _canvas,
      x: 0,
      y: 0
    })
    return {
      shape,
      canvas: _canvas
    }
  }
  // 创建layer

const drawBackground = () => {
    // Draw a green background behind everything
    const background = new Konva.Image({
        x: 0,
        y: 0,
        width: winW,
        height: winH,
        image: globals.ImageLoader!.get('background')!,
    });
    globals.layers.get('UI')!.add(background);

    // The dark overlay that appears when you click the action log is clicked,
    // when a player's name is clicked, when the game is paused, etc.
    globals.elements.stageFade = new Konva.Rect({
        x: 0,
        y: 0,
        width: winW,
        height: winH,
        opacity: 0.3,

export function fixme(this: HanabiCard) {
    this.fixme = new Konva.Image({
        x: 0.1 * CARD_W,
        y: 0.33 * CARD_H,
        width: 0.8 * CARD_W,
        image: globals.ImageLoader!.get('wrench')!,
        visible: false,
    });
    this.add(this.fixme);
}

initBackground(): Konva.Image {
    return new Konva.Image({
      x: 0,
      y: 0,
      width: this.width,
      height: this.height,
      image: this.image
    });
  }

if (config.text) {
            this.textElement = new FitText({
                x: 0,
                y: 0.275 * h,
                width: w,
                height: 0.5 * h,
                fontSize: 0.5 * h,
                fontFamily: 'Verdana',
                fill: 'white',
                align: 'center',
                text: config.text,
                listening: false,
            });
            this.add(this.textElement);
        } else if (images.length > 0) {
            this.imageElement = new Konva.Image({
                x: 0.2 * w,
                y: 0.2 * h,
                width: 0.6 * w,
                height: 0.6 * h,
                image: images[0],
                listening: false,
            });
            this.add(this.imageElement);

            if (images.length >= 2) {
                this.imageDisabledElement = new Konva.Image({
                    x: 0.2 * w,
                    y: 0.2 * h,
                    width: 0.6 * w,
                    height: 0.6 * h,
                    image: images[1],