processing.js, accès par bouton formulaire?

Je dois cliquer sur un bouton HTML et modifier une valeur dans processing.js. Cela semble que ce serait simple, mais quelque chose ne va pas ici:processing.js, accès par bouton formulaire?

<!DOCTYPE html> 
<html> 
<head> 
    <script src="../../processing.js"></script> 
</head> 
<body> 

<script type="application/processing"> 
int color =80; 
void setup() { 
    size(200, 200); 
    stroke(255); 
} 
void draw() { 
    background(0); 
    fill(color); 
    ellipse(100, 100, 160, 160); 
} 

function changeColor(newColor){ 
    color = newColor; 
} 
</script> 
<canvas width="200" height="200"></canvas></p> 
<div style="height:0px;width:0px;overflow:hidden;"></div> 

<button onClick="changeColor(150)">Change Color</button> 
</body> 
</html>

Source

2011-09-18 Roger

changement int color = 80; à var color = 80; et
<script type="application/processing"> à <script type="text/javascript">
et vous devriez être bon.

Il s'agit d'un concept connu sous les termes loose typing et dynamic typing (ce qui signifie qu'une variable JS peut contenir différents types de données à différents moments en fonction du contexte). Donc, vous ne définissez aucun type ici.

Source

2011-09-18 18:54:13 Saket

Merci Saket, cela a du sens. mais j'ai essayé et ça n'a pas marché. Je pense qu'il y a un problème supplémentaire. – Roger

Oh, j'ai édité ma réponse pour faire un changement supplémentaire (l'étiquette de script). Prenez des notes s'il vous plaît. – Saket

Je ne dis pas que c'est faux concernant la balise de script, ... Je dis que je ne suis pas convaincu que c'est juste. Le site processingjs.org a des exemples qui suivent le format de balise de script que j'ai utilisé. Fwiw, La plupart du script (plusieurs centaines de lignes) sont écrits en Java avec une ligne javascript occasionnelle qui a bien fonctionné (par exemple, document.getElementById ...). – Roger

Pour obtenir ce travail, modifiez votre fonction de dessin à:

int myColor = 80; 
void changeColor(newColor) { 
    myColor = newColor; 
}

changer votre code de bouton pour être les suivantes:

<button onClick="Processing.instances[0].changeColor(150)"> 
    Change Color 
</button>

La raison pour laquelle il ne fonctionnait pas avant est que

Le navigateur n'exécute pas de code dans un bloc <script> à moins qu'il n'ait type="text/javascript'. Contrairement à un bloc JavaScript normal, la fonction changeColor n'est pas globale à la page.
Étant donné que la fonction n'est pas globale, vous devez vous y référer via l'instance de traitement, avec le tableau Processing.instances.
Votre variable nommée color serait taper du pied sur la fonction API de traitement appelé color() alors j'ai changé le nom de votre variable
je changé votre fonction JavaScript pour une fonction de traitement; Processing.js attache des fonctions de traitement à l'esquisse lors de l'analyse, ce qui signifie que vous pouvez l'appeler vous-même plus tard.

Source

2011-11-01 03:14:30

processing.js, accès par bouton formulaire?

Répondre

Questions connexes