Requisito: Faça o botão do triângulo girar ao redor do círculo ao deslizar;
Encontrei um semelhante na Internet que só tem uma exibição de gráfico e não pode ser passado manualmente.
O processo de pensamento é o seguinte:
1. Para obter o efeito de rotação
O botão pode ser girado alterando o ângulo de rotação
transform:rotate(0deg);
transition:all .1s;2. Obtenha o ângulo de rotação
Primeiro, desenhamos um eixo de coordenadas xy no gráfico. Quando o botão está no primeiro quadrante, o ângulo em que o botão gira é o ângulo entre os lados de bc.
O comprimento do lado a é: o valor x da posição de toque na tela menos a distância do nó até o lado esquerdo da tela e depois menos metade da largura do nó;
O comprimento do lado b é: o valor y da posição de toque na tela menos a distância do nó até o lado superior da tela e depois menos metade da altura do nó para obter o valor absoluto;
Depois de ter os comprimentos de a e b, use o teorema de Pitágoras para calcular o comprimento de c;
Depois de usar a / c, use o método Math.asin para obter o valor do arco seno e, em seguida, * 180/Math.PI;
O valor obtido é o ângulo incluído do lado bc;
Se o botão estiver no quarto quadrante,
Neste momento, os métodos de cálculo do lado a e do lado b são trocados, os outros são os mesmos de quando estão no primeiro quadrante, e o ângulo final é somado 90 graus;
O método de cálculo do terceiro quadrante é o mesmo do primeiro quadrante, e o ângulo final é somado em 180 graus;
O segundo quadrante é calculado da mesma forma que o quarto quadrante, e o ângulo final é somado com 270 graus;
Desta forma, obtemos o ângulo de deslizamento para qualquer posição.
Código:
Não vou postar os códigos html e css aqui, você pode implementá-los de acordo com seu próprio estilo de interface.
Primeiro, obtenha os atributos do nó externo inferior em onload e calcule a posição do ponto central;
//由于小程序中不支持ref所以使用这种方式；
uni.createSelectorQuery().select('.inner').boundingClientRect(
(rect) => {
this.rect = rect;
this.rect.width_c = this.rect.width / 2;
this.rect.height_c = this.rect.height / 2;
console.log(this.rect);
}
).exec();Em seguida, ouça touchmove no nó externo
<view class="inner" @touchmove="move">O conteúdo do movimento é o seguinte:
/*
触摸位置的值减去节点距离屏幕边缘的位置 就得到了触摸点在节点中所在的位置;
注意这里的值并不是坐标轴里面的xy值，而是从节点的左上角向右向下延伸的值；
*/
let left = e.touches[0].pageX - this.rect.left;
let top = e.touches[0].pageY - this.rect.top;
// 这里根据中心点的位置判断下，触摸点所在的象限；
let now_index = 0;
if (left < this.rect.width_c) {
if (top < this.rect.height_c) {
now_index = 3
} else {
now_index = 2;
}
} else {
if (top < this.rect.height_c) {
now_index = 0;
} else {
now_index = 1;
}
}
// 触摸点在节点中所在的位置减去节点宽高的一半之后取绝对值，这样就确定了坐标轴中xy的值了。然后根据勾股定理计算出斜边的值；
let x = Math.abs(left - this.rect.width_c);
let y = Math.abs(top - this.rect.height_c);
let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
// 根据触摸点所在的象限判断 是取哪条边的值除以斜边之后取反正弦值
let asin = 0;
if (now_index == 0 || now_index == 2) {
asin = Math.asin(x / z);
} else {
asin = Math.asin(y / z);
}
// 计算出反正弦值后 * 180 / Math.PI后就得出了角度，再加上之前象限的角度就得到了所要旋转的角度了，之后赋值给html中的样式就可以了
let angle = Number((asin * 180 / Math.PI).toFixed(2)) + (now_index * 90);Os requisitos escritos aqui são basicamente realizados.
Originalidade não é fácil, espero que você deixe muitos comentários e curtidas.