React-konva移动缩放和可拖动图像

import React from 'react';
import { Stage, Layer, Image } from 'react-konva';

class App extends React.Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            draggable={true}
            image={yourImage}
            x={100}
            y={100}
          />
        </Layer>
      </Stage>
    );
  }
}

export default App;

import React from 'react';
import { Stage, Layer, Image } from 'react-konva';

class App extends React.Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            draggable={true}
            image={yourImage}
            x={100}
            y={100}
            scaleX={0.5}
            scaleY={0.5}
          />
        </Layer>
      </Stage>
    );
  }
}

export default App;

import React from 'react';
import { Stage, Layer, Image, Transformer } from 'react-konva';

class App extends React.Component {
  state = {
    selectedImage: null
  };

  handleSelectImage = (image) => {
    this.setState({ selectedImage: image });
  };

  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            draggable={true}
            image={yourImage1}
            x={100}
            y={100}
            onClick={() => this.handleSelectImage(yourImage1)}
          />
          <Image
            draggable={true}
            image={yourImage2}
            x={200}
            y={200}
            onClick={() => this.handleSelectImage(yourImage2)}
          />
          {this.state.selectedImage && (
            <Transformer
              ref={(node) => {
                this.transformer = node;
              }}
              rotateEnabled={false}
              enabledAnchors={['middle-left', 'middle-right']}
              boundBoxFunc={(oldBox, newBox) => {
                // Limit the transformer's bounding box to the stage
                if (newBox.x < 0 || newBox.y < 0 || newBox.x + newBox.width > window.innerWidth || newBox.y + newBox.height > window.innerHeight) {
                  return oldBox;
                }
                return newBox;
              }}
              nodes={[this.state.selectedImage]}
            />
          )}
        </Layer>
      </Stage>
    );
  }
}

export default App;