Я не могу получить доступ к 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>