Question

我在画布内设置尺寸时遇到问题，因此我正在为自己的工作创建一个演示，并在使用ngraph模块构建用于渲染图形的基础。

这是我在React上的主要组件

class AppComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      open: false
    };

    this.openDrawer = this.openDrawer.bind(this);
  }

  openDrawer(value) {
    this.setState({open: value});
  }

  render() {
    return (
      <div>
       <Drawer
          modal
          dismissible={true}
          open={this.state.open}
          className="content-drawer"
        >
          <IconButton className="drawer-icon-button-personal"
                      onClick={() => this.openDrawer(false)}>
            <MaterialIcon icon='close'/>
          </IconButton>
          <DrawerTitle tag="h2" className="drawer-title">
            Vincent Info
          </DrawerTitle>
          <DrawerContent>

          </DrawerContent>
        </Drawer>

        <DrawerAppContent className='drawer-app-content'>
          <TopAppBar className="topbar-app-personal">
            <TopAppBarRow>
              <TopAppBarSection align='start'>
                <TopAppBarIcon navIcon tabIndex={0}>
                  <MaterialIcon hasRipple icon='menu' onClick={() => this.openDrawer(true)}/>
                </TopAppBarIcon>
                <TopAppBarTitle>Vincent Builder</TopAppBarTitle>
              </TopAppBarSection>
              <TopAppBarSection align='end' role='toolbar'>
                <TopAppBarIcon actionItem tabIndex={0}>
                  <MaterialIcon
                    icon='stars'
                    onClick={() => window.open('https://vincenzopalazzo.github.io')}
                  />
                </TopAppBarIcon>
              </TopAppBarSection>
            </TopAppBarRow>
          </TopAppBar>
          <TopAppBarFixedAdjust className="container-app">
            <NGraphContainer/>
          </TopAppBarFixedAdjust>
        </DrawerAppContent>
      </div>
    );
  }
}

这是我用来绘制图形<NGraphContainer/>的组件，您的代码是：

class NGraphContainer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      graph: null,
      typeRenderer: 'pixel',
      typeGraph: 'transaction'
    };

    this.buildGraph = this.buildGraph.bind(this);
  }

  buildGraph() {
    //TODO call an method for cerate the graph
    let graph = require('ngraph.generators').grid(5, 5);
    this.renderGraph(graph);
  }

  componentDidMount() {
   let container = document.querySelector('.container-ngraph');
    this.setState({
      container: container
    })
  }

  renderGraph(graph) {
   let render = RenderGraph(graph, {
      container: this.state.container
    });
  }

  render() {
    return (
      <div>
        <div className="container-ngraph">
        </div>
          <Fab icon={<i className="material-icons icon-black">account_balance_wallet</i>}
               className="top-bar-personal-one icon-black"/>
          <Fab icon={<i className="material-icons icon-black">trending_up</i>}
               className="top-bar-personal-thee"
               onClick={() => this.buildGraph()}/>
          <Fab icon={<i className="material-icons icon-black">settings</i>}
               className="top-bar-personal-two"/>
      </div>
    );
  }
}

在div <div className="container-ngraph">内，我必须使用ngraph.pixel构建渲染图，并在画布内部构建图形，并在div内使用className container-ngraph构建画布。

该模块使用潜水尺寸构建画布，因此使用此代码

 renderer.setSize(container.clientWidth, container.clientHeight);

我的CSS是：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

body {
  font-family: 'Roboto' !important;
  color: #fff;
  background: #222;
  height: 100%;
  width: 100%;
}

.index img {
  margin: 40px auto;
  border-radius: 4px;
  background: #fff;
  display: block;
}

.drawer-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

.drawer-app-content {
  flex: auto;
  overflow: auto;
}

.top-app-bar-fix-adjust {
  display: flex;
  width: 100%;
}

.mdc-drawer--dismissible {
  top: auto;
}

.topbar-app-personal{
  background-color: #424242 !important;
}

.content-drawer{
  background-color: #424242 !important;
}

.drawer-title{
  text-align: center !important;
  color: aliceblue !important;
}

.drawer-icon-button-personal{
  right: 0em;
  display: inline-flex;
}

#container {
  position: relative;
}

.container-ngraph{
  height: 100%;
  width: 100%;
}

.top-bar-personal-one{
  background-color: #ffbd39;
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
}

.top-bar-personal-thee{
  background-color: #ffbd39;
  position: fixed !important;
  bottom: 6rem !important;
  right: 1rem !important;
}

.top-bar-personal-two{
  background-color: #ffbd39;
  position: fixed !important;
  bottom: 11rem !important;
  right: 1rem !important;
}

.container-ngraph{
  width: 100% !important;
  height: 100% !important;
}

.container-app{
  width: 100% !important;
  height: 100% !important;
}

i.icon-black {
  color: black;
}

canvas{
  width: 100% !important;
  height: 100% !important;
}

另外，我正在使用this react component

问题

在构建图形时，canvas组件的高度为= 0，我看不到图形，我也不知道问题，我是React的新手，能帮我解决这个错误吗？帮助我了解为什么会出现此错误？

react生成的html代码是：

<div class="container-ngraph">
<canvas width="1920" height="0" tabindex="-1" style="width: 1920px; height: 0px;"></canvas>

React上的维度clientWidth和clientHeight错误

问题

0 个答案: