Question

目标： 我正在使用React Leaflet构建游戏地图，并且正在使用ImageOverlay放置游戏图块，问题是传单不允许您旋转零件。我需要能够将ImageOverlays旋转一个角度。

我尝试过的事情：我使用ImageOverlay来创建地图，因为这些片段是按其中心坐标放置的PNG文件。然后那些人轮换了，我给了一个叫“轮换”的课。然后在'componentDidMount'上，我尝试使用'ReactDOM.findDOMNode（this）.getElementsByClassName（'rotate $ {degree}'）'查找具有该类名称的元素，但是在React组件上不起作用？

  componentDidMount() {
    // Below code returns empty arrays
    let elementsRotated90 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate90");
    let elementsRotated180 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate180");
    let elementsRotated270 = ReactDOM.findDOMNode(this).getElementsByClassName("rotate270");
  }

  render() {
    let position = [this.state.lat, this.state.long];
    return (
      <Map className="map" center={position} zoom={this.state.zoom}>
        <LayerGroup>
          {map1
            .data
            .Pieces
            .Stages
            .map(stage => {
              return stage
                .Tiles
                .map(tile => {
                  let height = tile.Resolution.Height;
                  let width = tile.Resolution.Width;
                  let url = require('./assets/pieces/' + tile.Type + '.png');
                  let rotation = tile.Rotation;
                  let center = tile.CenterCoord;
                  let bound = ([
                    [
                      center[1] - height / 2,
                      center[0] - width / 2
                    ],
                    [
                      center[1] + height / 2,
                      center[0] + width / 2
                    ]
                  ]);
                  let component = <ImageOverlay bounds={bound} url={url} 
                  className={`rotate${rotation}`}/>
                  this.state.markers.push(component);
                  return component;
                })
            })}
        </LayerGroup>
     </Map>
     )
  }

如果有人比我尝试过的要好，请告诉我。谢谢！

Answer 1

要轮换ImageOverlay component，可以考虑采用以下方法：

1）通过L.ImageOverlay instance获得ref attribute：

 const { leafletElement: imageOverlay } = this.imageOverlayRef.current;

其中

 <ImageOverlay
        ref={this.imageOverlayRef}
        ...
 />

2）获取Image元素并应用rotateZ() CSS function：

const image = imageOverlay.getElement()
this.rotateImage(image, this.rotateAngle);

其中

rotateImage(image, angle) {
    if (!this.originalTransformValue) {
      this.originalTransformValue = image.style.transform;
    }
    image.style.transform = `${this.originalTransformValue} rotateZ(${angle}deg)`;
}

Here is a demo供参考

React Leaflet-将ImageOverlay React组件旋转n度

1 个答案: