Интерактивный холст треугольник не крутится помощник Google - PullRequest
0 голосов
/ 10 ноября 2019

Я не могу получить доступ к triangle.svg в моей локальной системе, но когда я использую firebase, треугольник получает доступ и вращается. но я хочу, чтобы запустить в локально, пожалуйста, помогите вот код моего HTML и main.js. Я пытался разрешить доступ из разных методов, но ничего не помогло. Я не понимаю, как решить эту проблему, может кто-нибудь помочь мне избавиться от этой проблемы.

Ниже приведен код для index.html и main.js:

    'use strict';

     window.onload = () => {
       this.scene = new Scene();

    // Set Google Assistant Canvas Action at scene level
    this.scene.action = new Action(scene);
    // Call setCallbacks to register interactive canvas
     this.scene.action.setCallbacks();
    };

   
     constructor() {
      const view = document.getElementById('view');

    // set up fps monitoring
    const stats = new Stats();
    view.getElementsByClassName('stats')[0].appendChild(stats.domElement);

    // initialize rendering and set correct sizing
    this.radio = window.devicePixelRatio;
    this.renderer = PIXI.autoDetectRenderer({
      transparent: true,
      antialias: true,
      resolution: this.radio,
      width: view.clientWidth,
      height: view.clientHeight,
    });
    this.element = this.renderer.view;
    this.element.style.width = `${this.renderer.width / this.radio}px`;
    this.element.style.height = `${(this.renderer.height / this.radio)}px`;
    view.appendChild(this.element);

    // center stage and normalize scaling for all resolutions
    this.stage = new PIXI.Container();
    this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);
    this.stage.scale.set(Math.max(this.renderer.width,
        this.renderer.height) / 1024);

    // load a sprite from a svg file
    this.sprite = PIXI.Sprite.from('./triangle.svg');
    this.sprite.anchor.set(0.5);
    this.sprite.tint = 0x00FF00; // green
    this.sprite.spin = true;
    this.stage.addChild(this.sprite);

    // toggle spin on touch events of the triangle
    this.sprite.interactive = true;
    this.sprite.buttonMode = true;
    this.sprite.on('pointerdown', () => {
      this.sprite.spin = !this.sprite.spin;
    });

    let last = performance.now();
    // frame-by-frame animation function
    const frame = () => {
      stats.begin();

      // calculate time differences for smooth animations
      const now = performance.now();
      const delta = now - last;

      // rotate the triangle only if spin is true
      if (this.sprite.spin) {
        this.sprite.rotation += delta / 1000;
      }

      last = now;

      this.renderer.render(this.stage);
      stats.end();
      requestAnimationFrame(frame);
    };
    frame();
    this.createRestartGameButton();
     }
     createRestartGameButton() {
        const textureButton = PIXI.Texture
            .fromImage('./restart_game_btn_enabled.png');
         this.button = new PIXI.Sprite(textureButton);
        this.button.scale.set(0.5);
        this.button.textureButton = textureButton;
        this.button.textureButtonDisabled = PIXI.Texture
           .fromImage('./restart_game_btn_disabled.png');
        const that = this;
        const onButtonDown = function() {
         console.log(`Request in flight`);
          that.button.texture = that.button.textureButtonDisabled;
         that.sprite.spin = false;
          that.action.canvas.sendTextQuery('Restart game')
          .then((res) => {
            if (res.toUpperCase() === 'SUCCESS') {
              console.log(`Request in flight: ${res}`);
              that.button.texture = that.button.textureButtonDisabled;
              that.sprite.spin = false;
            } else {
              console.log(`Request in flight: ${res}`);
            }
          });
    };

    this.button.buttonMode = true;
    this.button.anchor.set(0.5);
    this.button.x = 0;
    this.button.y = 100;
    this.button.interactive = true;
    this.button.buttonMode = true;
    this.button.on('pointerdown',z onButtonDown);
    this.stage.addChild(this.button);
       }
    }
}
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Interactive Canvas Sample</title>

    <!-- Disable favicon requests -->
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

    <!-- Load Interactive Canvas JavaScript -->
    <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

    <!-- Load PixiJS for graphics rendering -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <!-- Load Stats.js for fps monitoring -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

    <!-- Load custom CSS -->
    <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div id="view" class="view">
      <div class="debug">
        <div class="stats"></div>
        <div class="logs"></div>
      </div>
    </div>
    <!-- Load custom JavaScript after elements are on page -->
    <script src="js/action.js"></script>
    <script src="js/main.js"></script>
    <script src="js/log.js"></script>
    </body>
    </html>

enter image description here

...