2016-12-23 7 views
0

Ich mache ein einfaches Projekt mit Physics.JS und möchte Text zu einer PhysicsJS World hinzufügen können. Ich habe in der Dokumentation nachgeschaut, aber ich konnte nichts finden, was mir erlauben würde, so etwas zu tun. Gibt es eine Möglichkeit, Text hinzuzufügen und auch Teile davon manipulieren zu können, wie beispielsweise die Geschwindigkeit, die Restitution und andere Dinge aus der Engine zu erhöhen?Wie man mit PhysicsJS Text zur Leinwand hinzufügt

+0

Wenn Sie Text interaktivieren möchten Mit der Physik der Welt müssen Sie einen Physikkörper in der Form des gewünschten Textes erstellen. Wie zum statischen Zeichnen von Text ist PhysicsJS nicht wirklich dafür gebaut. –

+0

Meinst du, jedes Zeichen des Textes mit konvexen Polygon als eine Möglichkeit, einen Körper zu erstellen ziehen? – Darko

+0

Yup. Das heißt, wenn du möchtest, dass es als physischer Körper wirkt. –

Antwort

0

verlängern Sie einfach einen rectangle Körper und seine view mit Text auf es zu einer Leinwand ändern:

Physics.body('text', 'rectangle', function (parent) { 
     var canv = document.createElement('canvas'); 
     canv.width = 310; 
     canv.height = 60; 
     var ctx = canv.getContext("2d"); 
     ctx.fillStyle = "#ffffff"; 
     ctx.textAlign = "left" 
     ctx.textBaseline = "top"; 
     ctx.font = "80px sans-serif"; 

     return { 
      // Called when the body is initialized 
      init: function(options) { 
       parent.init.call(this, options); 
       ctx.fillText(options.text,0,0); 
      }, 
      // Called when the body is added to a world 
      connect: function() { 
       this.view = canv; 
      } 
     } 
    }); 

Dann es instanziiert:

Physics.body('text', { 
    x: 400, 
    y: 570, 
    width: 310, 
    height: 60, 
    text: "Some text here", 
}) 

Sie die Zeichenfolge von Text über options.text angeben .
Natürlich würde man es dynamischer machen, indem man die Schriftparameter in den Optionen angeben, dann automatisch die Dimension in Init berechnen lässt und so weiter ...

Verwandte Themen