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.
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.
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.
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
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.