масштабировать HTML-холст (html / реагировать) - PullRequest
Новая
       23

масштабировать HTML-холст (html / реагировать)

0 голосов
/ 30 ноября 2018

Я пытаюсь масштабировать холст: 

class DungeonMap extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() { 
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2)
    this.setState({})
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
          <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
}

Код компилируется, но масштабирование холста не применяется, я пробовал разные значения для масштабирования.

Как вы можетевидите, я также попытался поместить this.setState({}), чтобы вызвать повторную визуализацию, но холст все еще не масштабируется.

Я почти уверен, что componentDidMount() - правильный метод для использования, потому что я должен убедиться, что масштабирование применяется после загрузки HTML: Невозможно прочитать свойство 'getContext' из null, используя canvas

Как применить масштабирование к холсту?

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

попытка установить свойство canvas в состоянии компонента и в componentDidMount делает setState ({ширина: 600, высота: 500}) 

    class DungeonMap extends Component {
  constructor(props) {
    super(props);
this.state={
        width:200,
        height:300
}
  }
  componentDidMount() { 
    const canvas = this.refs.canvas;

    // to scale the <canvas> element itself
    canvas.width = this.state.widht;
    canvas.height = this.state.height;

    // to scale the drawings, use the context
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2);
  this.setState({widht:1000,height:800})
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
        <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
};

это должно быть найдено

0 голосов
/ 30 ноября 2018

Попробуйте установить атрибут width и height для элемента <canvas>: 

class DungeonMap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { 
    const canvas = this.refs.canvas;

    // to scale the <canvas> element itself
    canvas.width = 500;
    canvas.height = 500;

    // to scale the drawings, use the context
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2);
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
        <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
};

Кстати: я не совсем уверен, но не должен ли этот элемент <canvas>в вашем JSX есть закрывающий тег?Или JSX обрабатывает это по-другому?Я не очень часто использую JSX.

...