移动或拖动svg图像时,做出react-svg-pan-zoom闪烁

时间:2019-06-05 06:18:31

标签: javascript reactjs svg svgpanzoom

我正在使用react-svg-pan-zoom来创建svg平移图像,但是在拖动时它会闪烁,是否可以使svg移动更平滑,或者可以重新使用svg的拖动速度?请帮助...

在这里查看我的输出... https://drive.google.com/open?id=1Jx4vhU62DqJzYsnW95fWQKjj75iwpDZ6

   <ReactSVGPanZoom
        ref={refs => {
          this.panZoom = refs;
        }}
        tool={TOOL_AUTO}
        toolbarPosition="none"
        background="transparent"
        width={window.innerWidth}
        height={this.state.height}
        // onClick={this.onClick}>

        scaleFactor={1.1}
        preventPanOutside={true}
        detectPinchGesture ={true}
        style={{ g: { transition: "all 0.5s linear 0s" } }}
        className={this.state.isTransition ? "pan-zoom" : ""}
        onPan={this.transitionOff}
        onZoom={this.transitionOff}
        //onMouseDown={this.onClick}

      >
        <svg id="root-svg" overflow="hidden">
          <g style={{ transition: "all 0.5s linear 0s" }}>
            {this.state.paths.map((path, index) => (
              <PathLine
                key={index}
                {...path}
                stroke="rgb(90, 86, 77)"
                strokeWidth="1"
                fill="none"
                r={10}
              />
            ))}
            {this.state.nodes.map(node => (
              <Node
                key={node.id}
                data={node}
                onClickNode={this.onClickNode}
                openAddModal={() => this.openAddModal(node)}
                onClickRemoveConnectedSibling={() =>
                  this.onClickRemoveConnectedSibling(
                    node.id,
                    node.connected_node_family_id
                  )
                }
                openAddProfileModal={this.openAddProfileModal}
                openAddAsSiblingModal={() =>
                  this.openAddAsSiblingModal(node)
                }
              />
            ))}
          </g>
        </svg>
      </ReactSVGPanZoom>

0 个答案:

没有答案