1

我在这里有一个非常奇怪的错误。

我正在做一个应用程序，用户可以使用 react-native-svg 放大和缩小并在 SVG 屏幕内绘制一些东西。

在我在模拟器上运行的移动应用程序中，转换工作完美。

在同一个应用程序中，作为 webapp (expo start --web) 运行，它从未应用过任何转换。即使我在矩阵上硬编码。

这是我的重要代码的一部分：

export default class DrawView extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      currentMax: 0,
      currentPoints: [],
      reaction: new Reaction(),
      zoom: 1,
      left: 0,
      top: 0,
      transformerMatrix: { a: 1, e: 1, c: 0, f: 0 },
      startDrawing: false,
      seconds: 0,
      email: '',
      userSentData: false,
      showPopUp: false
    };

这是一个简单的变压器矩阵。在我的渲染方法中，我有：

 <View style={{ flex: 1 }}>
    <View
      //onLayout={this._onLayoutContainer}
      style={[
        styles.drawContainer,
        this.props.containerStyle,

        { width: this.props.width, height: this.props.height }
      ]}
    >
      <View {...this._panResponder.panHandlers}>
        <Svg
          style={styles.drawSurface}
          width={this.props.width}
          height={this.props.height}
        >
          <G
            transform={{
              translateX: this.state.transformerMatrix.c,
              translateY: this.state.transformerMatrix.f,
              scale: this.state.transformerMatrix.a
            }}
          >
            {/* <Grid /> */}
            <Image
              width={'100%'}
              height={'100%'}
              preserveAspectRatio="xMidYMid slice"
              opacity="1"
              href={require('../assets/images/FinalEarthGifPaletaWeb-8192x8192.gif')}
              clipPath="url(#clip)"
            />

例如，如果我将 transformerMatrix.a 更改为 1.3。图像放大了 30%。在模拟器上，它进行了转换。但是在 webApp 中什么也没有发生。

在此处输入图像描述

在此处输入图像描述

如你看到的。它没有放大 webapp 应用程序，而不是 iOS 应用程序。

有谁知道在 webApp 中与 react-native-svg 相关的东西没有被转换？

4

1 回答 1

0

在尝试了很多东西之后，答案是，这里的转换属性库上有一个错误：

<G
  transform={{
    translateX: this.state.transformerMatrix.c,
    translateY: this.state.transformerMatrix.f,
    scale: this.state.transformerMatrix.a
  }}
>

这个转换属性，在 iOS 上运行良好，但在 web 中需要是一个字符串：

如果我们更改字符串插值的方法并传递给属性，它会起作用：

<G
  transform=`
    translateX: ${this.state.transformerMatrix.c},
    translateY: ${this.state.transformerMatrix.f},
    scale: ${this.state.transformerMatrix.a}
  `
>

这是一个非常棘手的解决方案。我发送了一个 PR 来在 native-svg 库上修复它。

于 2020-05-16T12:49:25.147 回答