Campos de ângulo

Um campo de ângulo armazena um número como seu valor e uma string como texto. O valor é um número entre 0 e 360 (esse intervalo pode ser alterado), enquanto o texto pode ser qualquer string inserida no editor.

Campo de ângulo

Campo de ângulo com editor

Campo de ângulo recolhido

com base em trends

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');
  }
};

O construtor de ângulo aceita um valor e um validator opcionais. Zero será usado como o valor padrão se nenhum valor for fornecido ou se o valor fornecido não for convertido em um número.

Serialização

JSON

O JSON de um campo de ângulo tem esta aparência:

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

Em que FIELDNAME é uma string que se refere a um campo de ângulo, e o valor é o valor a ser aplicado ao campo. O valor segue as mesmas regras do valor do construtor.

XML

O XML de um campo de ângulo fica assim:

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

Em que o atributo name contém uma string que se refere a um campo de ângulo, e o texto interno é o valor a ser aplicado ao campo. O valor do texto interno segue as mesmas regras do valor do construtor.

Personalização

Ajuste

A propriedade Blockly.FieldAngle.ROUND muda os valores aos quais o seletor de ângulo se ajusta ao usar um mouse.

Observação: isso não afeta a parte de entrada de texto do campo de ângulo. Portanto, se você quiser garantir que o valor do ângulo seja arredondado, use um validator.

Veja um exemplo com um valor ROUND de 70:

A propriedade ROUND assume o valor padrão de 15. Defina-o como 0 se quiser desativar o ajuste.

Essa é uma propriedade global, portanto, modificará todos os campos de ângulo quando definidos.

Direção

A propriedade Blockly.FieldAngle.CLOCKWISE muda a direção que faz o valor do ângulo aumentar. Definir esse valor como true faz o ângulo aumentar à medida que o seletor é movido no sentido horário, definir como false faz o ângulo aumentar à medida que é movido no sentido anti-horário.

CLOCKWISE definido como true

CLOCKWISE definido como false

A propriedade CLOCKWISE é definida por padrão como false, o que significa que o movimento no sentido anti-horário vai aumentar o ângulo.

Essa é uma propriedade global, portanto, modificará todos os campos de ângulo quando definidos.

Posição zero

A propriedade Blockly.FieldAngle.OFFSET define o local em que 0 grau está localizado. Por padrão, o zero grau é alinhado com o eixo x positivo (à direita) e essa propriedade "desloca" essa posição em alguns graus.

Observação: a direção do ajuste é sempre no sentido anti-horário, independente da propriedade CLOCKWISE.

A propriedade OFFSET é definida como 0 por padrão, o que significa que zero graus é alinhado com o eixo x positivo.

Essa é uma propriedade global, portanto, modificará todos os campos de ângulo quando definidos.

Intervalo

A propriedade Blockly.FieldAngle.WRAP define o intervalo de valores. O intervalo de valores é igual a (-360 + WRAP, WRAP). Isso significa que um valor de WRAP de 360 fornecerá um intervalo de (0, 359.9) e um valor de WRAP de 180 fornecerá um intervalo de (-179.9, 180).

A propriedade WRAP assume como padrão 360, o que significa que o intervalo do campo é (0, 359.9).

Essa é uma propriedade global, portanto, modificará todos os campos de ângulo quando definidos.

Tamanho do seletor de ângulo

A propriedade Blockly.FieldAngle.HALF muda o tamanho do seletor de ângulo. Esse valor define o raio do círculo externo em pixels.

A propriedade HALF assume o padrão 50.

Essa é uma propriedade global, portanto, modificará todos os campos de ângulo quando definidos.

Observação: o tamanho do seletor de ângulo não é afetado pela escala do espaço de trabalho.

Modos comuns

A direção e a posição zero podem ser usadas juntas para criar algumas combinações divertidas. Aqui estão dois problemas comuns:

Transferidor

0 grau está à direita, 90 graus está para cima.

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

Bússola

0 grau está para cima, 90 graus é a direita.

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

Como criar um validador de ângulo

Observação: para informações sobre validadores em geral, consulte Validadores.

O valor de um campo de ângulo é um número. Portanto, todos os validadores precisam aceitar um número e retornar um número, null ou undefined.

Veja o exemplo de um validador que força o valor a ser um múltiplo de 30:

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

Observe como a propriedade [ROUND](#snapping) do campo de ângulo ainda está definida como 15. Portanto, os elementos gráficos do campo exibem múltiplos de 15, em vez de 30.