Как изменить размер холста? - PullRequest
Новая
       10

Как изменить размер холста?

0 голосов
/ 11 октября 2019

Я попытался изменить размер содержимого Unity в браузере Chrome, используя следующую строку кода:

<Unity unityContent={this.unityContent} width="50%" height="50%" />;

, но изменений не произошло. см. ниже весь исходный код. Нужен совет. Я попробовал Google для альтернативного решения, но не могу найти подходящее для меня. 

import React, { Component } from "react";
import Unity, { UnityContent } from "react-unity-webgl";

class Gym extends Component {
  constructor(props) {
    super(props);
    this.speed = 0;
    //spd will start at 0.
    this.state = {
      value: 0
    };

    this.unityContent = new UnityContent(
      "Build/File using browser.json",
      "Build/UnityLoader.js"
    );

    // Create a new listener for our Unity Events.
    // We're going to call this event "displaySpeed" and
    // pass the spd to the listener. The second
    // parameter will be a function.

    // this set the speed according to the one in unity

    this.unityContent.on("displaySpeed", spd => {
      if (spd !== 0) {
        this.setState({
          value: spd
        });
        console.log(spd);
      }
    });

    //
    this.decrease = this.decrease.bind(this);
    this.increase = this.increase.bind(this);
    this.reset = this.reset.bind(this);
    //
    this.SceneChange = this.SceneChange.bind(this);
    this.changeView = this.changeView.bind(this);
  }

  decrease = () => {
    if (this.speed >= 100) {
      this.setState({ value: this.speed - 100 });
      this.unityContent.send("pedal_revise", "StartRotating", this.speed);
    } else {
      this.setState({ value: 0 });
    }
  };
  increase = () => {
    this.setState({ value: this.speed + 100 });
    this.unityContent.send("pedal_revise", "StartRotating", this.speed);
  };
  reset = () => {
    this.setState({ value: 0 });
    this.unityContent.send("pedal_revise", "StopPedaling");
  };

  // change scene and orientatation buttons
  SceneChange() {
    this.unityContent.send("GameManageer", "ChangeScene");
  }
  changeView() {
    this.unityContent.send("ChangeOrientation", "ChangeView");
  }

  render() {
    return (
      // Finally render the Unity component and pass
      // the Unity content
      // through the props. And create
      // a button to handle the click event
      <div>
        <button onClick={this.decrease}>-</button>
        <input
          className="quantity"
          name="quantity"
          value={this.state.value}
          onChange={() => console.log("change")}
          type="number"
        />
        <button onClick={this.increase}>+</button>
        <button onClick={this.reset}>Reset</button>
        <br />
        <button onClick={this.changeView}>2D/3D</button>
        <button onClick={this.SceneChange}>Change</button>
        <Unity unityContent={this.unityContent} width="50%" height="50%"  />;
      </div>
    );
  }
}

export default Gym;

сосредоточиться только на последней строке единство контента и далее.

1 Ответ

0 голосов
/ 11 октября 2019

Вы пытались изменить свойство «Режим масштабирования пользовательского интерфейса» в компоненте Canvas Scaler на «Масштаб с размером экрана»?

...