Champs d'angle

Un champ d’angle stocke un nombre en tant que valeur et une chaîne en tant que texte. Sa valeur est un nombre compris entre 0 et 360 (cette plage peut être modifiée), tandis que son texte peut correspondre à n'importe quelle chaîne saisie dans son éditeur.

Champ d'angle

Champ d'angle avec l'éditeur

Champ d'angle réduit

Création

JSON

{
  "type": "example_angle",
  "message0": "angle: %1",
  "args0": [
    {
      "type": "field_angle",
      "name": "FIELDNAME",
      "angle": 90
    }
  ]
}

JavaScript

Blockly.Blocks['example_angle'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('angle:')
        .appendField(new Blockly.FieldAngle(90), 'FIELDNAME');
  }
};

Le constructeur d'angle accepte une valeur et un validator facultatifs. La valeur zéro est utilisée comme valeur par défaut si aucune valeur n'est indiquée ou si la valeur donnée n'est pas convertie en nombre.

sérialisation

JSON

Le code JSON d'un champ d'angle se présente comme suit:

{
  "fields": {
    "FIELDNAME": 0
  }
}

Où FIELDNAME est une chaîne faisant référence à un champ d'angle, et la valeur est la valeur à appliquer au champ. La valeur suit les mêmes règles que la valeur du constructeur.

XML

Le code XML d'un champ d'angle se présente comme suit:

<field name="FIELDNAME">0</field>

Où l'attribut name contient une chaîne faisant référence à un champ d'angle, et le texte intérieur est la valeur à appliquer au champ. La valeur de texte interne suit les mêmes règles que la valeur du constructeur.

Fonctionnalités

Ancrage

La propriété Blockly.FieldAngle.ROUND modifie la valeur à appliquer au sélecteur d'angle lorsqu'il utilise la souris.

Voici un exemple avec une valeur ROUND de 70:

Champ d&#39;angle avec une valeur ROUND 70

La propriété ROUND est définie par défaut sur 15. Définissez-la sur 0 si vous souhaitez désactiver l'ancrage.

Comme il s'agit d'une propriété globale, tous les champs d'angle seront modifiés lorsqu'ils seront définis.

Sens de circulation

La propriété Blockly.FieldAngle.CLOCKWISE change la direction dans laquelle la valeur de l'angle augmente. Définir cette valeur sur true augmente l'angle à mesure que le sélecteur est déplacé dans le sens des aiguilles d'une montre, tandis que le définir sur false augmente l'angle à mesure qu'il est déplacé dans le sens inverse des aiguilles d'une montre.

Dans le sens des aiguilles d'une montre défini sur "true"

Champ d&#39;angle avec le sens des aiguilles d&#39;une montre défini sur &quot;true&quot;

Dans le sens des aiguilles d'une montre défini sur "false"

Champ d&#39;angle avec dans le sens des aiguilles d&#39;une montre défini sur &quot;false&quot;

La propriété CLOCKWISE est définie par défaut sur false, ce qui signifie qu'un mouvement dans le sens inverse des aiguilles d'une montre augmentera l'angle.

Comme il s'agit d'une propriété globale, tous les champs d'angle seront modifiés lorsqu'ils seront définis.

Position zéro

La propriété Blockly.FieldAngle.OFFSET définit l'emplacement de 0 degré. Par défaut, la valeur zéro degré est alignée sur l'axe X positif (vers la droite). Cette propriété décale ensuite cette position d'un certain nombre de degrés.

Sélecteur d&#39;angle zéro à droite

Sélecteur d&#39;angle zéro en haut

La propriété OFFSET est définie par défaut sur 0, ce qui signifie que zéro degré est aligné sur l'axe des abscisses positif.

Comme il s'agit d'une propriété globale, tous les champs d'angle seront modifiés lorsqu'ils seront définis.

Plage

La propriété Blockly.FieldAngle.WRAP définit la plage de valeurs. La plage de valeurs est égale à (-360 + WRAP, WRAP). Cela signifie qu'une valeur WRAP de 360 donne une plage de (0, 359.9), et qu'une valeur de WRAP de 180 donne une plage de (-179.9, 180).

Sélecteur d&#39;angle avec une valeur de retour à la ligne de 180

La propriété WRAP est définie par défaut sur 360, ce qui signifie que la plage du champ est (0, 359.9).

Comme il s'agit d'une propriété globale, tous les champs d'angle seront modifiés lorsqu'ils seront définis.

Taille du sélecteur d'angle

La propriété Blockly.FieldAngle.HALF modifie la taille du sélecteur d'angle. Cette valeur définit le rayon du cercle extérieur en pixels.

Sélecteur d&#39;angle avec taille de l&#39;éditeur par défaut

Sélecteur d&#39;angle avec grand éditeur

La propriété HALF est définie par défaut sur 50.

Comme il s'agit d'une propriété globale, tous les champs d'angle seront modifiés lorsqu'ils seront définis.

Modes courants

Vous pouvez utiliser la direction et la position zéro pour créer des combinaisons amusantes. Voici deux problèmes courants:

Rapporteur

0 degré à droite, 90 degrés en haut.

Blockly.FieldAngle.CLOCKWISE = false;
Blockly.FieldAngle.OFFSET = 0;

Sélecteur d&#39;angle configuré en tant que rapporteur

Boussole

0 degré est en hausse, 90 degrés est à droite.

Blockly.FieldAngle.CLOCKWISE = true;
Blockly.FieldAngle.OFFSET = 90;

Sélecteur d&#39;angle configuré comme boussole

Créer un validateur d'angle

La valeur d'un champ d'angle est un nombre. Tous les validateurs doivent donc l'accepter et renvoyer un nombre, null ou undefined.

Voici un exemple de programme de validation qui force la valeur à être un multiple de 30:

function(newValue) {
    return Math.round(newValue / 30) * 30;
}

Sélecteur d&#39;angle avec validateur

Notez que la propriété [ROUND](#snapping) du champ d'angle est toujours définie sur 15, de sorte que les éléments graphiques du champ affichent des multiples de 15 au lieu de 30.