The text created with PixiJS is not drawn

Question

The text created with PixiJS is not drawn

Navigation

#1 by (3 votes)

1

I try to draw the text, but it is not drawn, why the error?

This is my code:

var a = document.getElementById("canvas");
var d = PIXI.autoDetectRenderer(200,200,a);
var ctx = new PIXI.Graphics();

document.body.appendChild(d.view);

var es = new PIXI.TextStyle({fontFamily: 'monospace',fontSize: '20px',fill: 'blue'});
var t = new PIXI.Text('Probando.',es);
t.y = 50;
t.x = 50;

d.stage.addChild(d);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

canvas pixijs

asked by Eduardo Sebastian 24.07.2017 в 13:16

source

1 answer

Make QT applications for 64 bits How to send ASCII codes to a serial port and read as bytes or characters? - C ++

score 3 · Accepted Answer

The code fails because there is no stage (container). Resolved by calling .Application() , as you answered in your previous question .

Otherwise, you should create a stage per code with PIXI.Container() ,

var stage = new PIXI.Container();

And then calling the .render .

In addition, to use an existing canvas, you have to pass an object as a third parameter, with the property:

{view: canvas}

These examples are very good in the documentation .
I recommend you read the tutorial: Learning Pixi .

var canvas = document.getElementById("canvas");
var renderer = PIXI.autoDetectRenderer(200,200,{view: canvas});

//Creamos un contenedor (stage)
var stage = new PIXI.Container();


//texto
var estilo = new PIXI.TextStyle({fontFamily: 'monospace',fontSize: '20px',fill: 'blue'});
var texto = new PIXI.Text('Probando.',estilo);
texto.y = 50;
texto.x = 50;

//texto al contenedor
stage.addChild(texto);

//contenedor al renderer
renderer.render(stage);

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.js"></script>
</head>
<body>
     <canvas id="canvas"></canvas>
</body>
</html>